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内 容 提要 

WPEF 走 做 软 新 一 代 开 有 发 扩 术 ， 遂 苗 了 呆 面 应 用 程序 开 及 、 网 络 应 用 
程序 开发 和 移动 应 用 程序 开发 ， 是 做 软 开 发 拉 术 未 来 十 年 的 主要 方 同 。 

本 书 的 内 容 分 为 两 大 部 分 。 第 一 部 分 是 学 习 WPF 开 有 的 基础 知识 ， 
包括 XAML 语 言 的 详细 训 析 、WPF 控 件 的 使 用 、 用 户 界 面 布 局 的 介绍 。 
第 二 部 分 是 作为 优秀 WPF 程 序 员 所 应 掌握 的 知识 ， 包 括 依赖 对 象 和 数据 
关联 、 足 由 事件 与 命令 、 数 据 模板 与 控件 模板 、 绘 图 与 动画 等 。 

本 书 作 者 具有 多 年 WPF 开 发 经 验 ， 历 经 多 个 大 型 项 目 ， 现 任 微软 
(美国 ) 下 载 中 心 项 目 组 高 级 开发 工程 师 。 本 书 是 作者 多 年 来 学 习 和 使 
用 WPE 的 经 验 总 结 。 

本 书包 含 了 众多 WPF 面 试点 ， 作 者 凭借 书 中 的 知识 顺利 通过 徽 软 
(美国 ) 的 面试 。 
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写作 绿 起 


本 书 的 写作 缘起 几 年 前 我 学 习 WPF。 因 为 我 是 从 Windows Forms 开 
发 转 来 做 WPF 开 发 的 ， 学 习 过 程 中 遇 到 很 多 新 概念 、 新 特性 ， 其 中 包括 
Data Binding、 路 由 事件 、 命 令 、 各 种 模板 等 。 我 的 工作 风格 是 对 于 每 
个 新 知识 ， 一 定 先 把 它 理解 透彻 、 摘 明白 再 应 用 于 项 目 中 ， 不 然 总 感觉 
使 用 起 来 不 放心 ， 于 是 束 对 照 已 有 的 瑞 文 书籍 和 MSDN 逐 一 研究 这 些 知 
识 点 。 每 有 所 得 ， 都 豆 欢 写成 博客 发 表 在 网 上 ， 一 来 供 大 家 学 习 参 考 ， 
二 来 做 一 个 积累 、 防 止 以 后 遗忘 。 博 客 发 表 之 后 收 到 很 多 读者 的 反馈 和 
戈 励 ， 大 家 布 望 我 能 把 这 些 文 草编 手 成 册 、 形 成 一 本 学 习 教 材 ， 于 是 我 
下 决心 开始 写 这 本 书 。 这 本 书 的 名 字 也 就 随 了 系列 博客 文章 的 名 字 一 一 
《深入 浅 出 WPF》 。 

之 所 以 叫 仿 条 入 浅 出 *"， 原 因 有 两 个 。 名 为 “深入 ”， 是 想 把 WPF 也 诠 
释 一 番 ， 上 所 以 书 中 的 每 个 例子 都 有 可 供 谢 析 的 实例 ， 对 于 一 些 重 要 概 
念 ， 我 通过 分 机 WPEF 的 源 代 码 给 予 前 述 CNET Framework 的 部 分 源 代码 
是 向 开发 人 员 开 放 的 ， 其 中 就 包含 WPF 的 源 代码 ) 。 名 为 “ 浅 出 ”， 是 因 
为 几乎 每 个 概念 我 都 会 用 生活 中 浅显 易 懂 的 例子 进行 类 比 ， 让 读者 可 以 
轻松 理解 ， 降 低 学 习 抽 象 知识 的 痛 苗 。 

为 本 书 起 这 个 名 字 ， 也 是 出 于 我 对 《深入 浅 出 MFC》 这 本 书 的 景仰 
之 情 。 我 刚刚 开始 学 编程 的 时 候 正 是 MEFC 流 行 的 年 代 ，《 深 入 浅 出 
MFC》 这 本 书 给 我 的 学 习 风 格 打 下 了 深 深 的 烙印 。 其 中 对 我 影 啊 最 深刻 
的 ， 一 个 是 它 对 MFC 源 人 码 的 分 析 ， 男 一 个 是 “ 勿 在 浮 沙 筑 高 台 、 几 事 必 
究 其 理 的 探索 精神 。 在 后 来 的 近 十 年 工作 中 ， 分 析 和 学 习 微 软 开 发 框架 
的 源码 成 为 我 工作 的 方法 论 。 本 书 中 包含 了 一 些 对 WPF 源 人 码 的 分 析 ， 玫 
助 大 家 对 WPF 有 个 透彻 的 理解 。 我 以 《深入 浅 出 MFC》 一 书 为 准绳 和 著 
宋 目 己 的 力量 ,希望 能 为 大 家 和 奉 上 一 本 有 用 的 好 书 。 

写 博客 容易 ， 写 书 难 。 写 博客 ， 内 容 上 可 以 不 那么 连贯 、 不 太 严 
谨 ， 写 书 就 不 一 样 了 ， 要 求 每 个 知识 点 都 要 仔细 琢磨 、 谭 慎 下 笔 ， 经 常 
是 写 了 满 满 一 扁 之 后 感觉 不 满意 义 删 挥 重 来 ， 直 到 我 认为 初级 谈 者 也 能 
顺畅 理解 为 止 。 多 少 个 不 卢 之 夜 就 是 在 这 种 字 项 句 酌 中 转瞬 即 逝 ， 一 年 
下 来 ， 头 上 也 冒 出 了 很 多 白 发 。 我 想 ， 既 然 写 书 ， 那 就 要 把 自己 的 心血 
奉献 给 读者 ， 这 样 才 对 得 起 读者 也 对 得 起 目 己 。 
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多 的 部 分 。 所 以 在 “轻松 幽默 、 深 入 浅 出 ?的 风格 基础 上 ， 本 书 力 求实 
用 。 与 书 的 过 程 其 实 也 是 对 WPF 进 行 深耕 的 过 程 ， 本 书写 作 过 半 时 ， 我 
俩 然 获得 一 个 机 会 可 以 参加 人 微软 的 一 个 开发 项 目 ， 和 面试 我 的 是 美国 微软 
的 一 位 局 级 项 目 经 理 ( 现 在 是 我 的 老板 〉， 面 试 的 内 容 束 是 WPF 开 友 。 
我 基本 上 都 是 用 书 中 的 原 话 作答 ， 十 分 顺利 一 一 我 获得 了 来 美国 工作 的 
机 会 ， 目 前 负责 微软 下 载 中 心 管 理工 具 的 开发 。 我 想 ， 这 也 算是 对 本 书 
内 容 的 一 次 检验 ， 衷 心 希望 大 家 在 学 习 完 这 本 书 中 的 内 容 后 也 能 在 目 己 
的 职业 发 展 上 获得 进步 。 

毕竟 我 的 水 平 有 限 ， 尽 管 下 力气 去 与 但 还 是 感觉 很 粗 和 线 ， 有些 知识 
超出 微软 官方 文档 的 上 复 凋 ， 我 也 融入 一 点 目 己 的 判断 ， 对 WPF 这 但 的 疯 
该 也 是 在 探索 中 前 行 ， 所 以 ， 书 中 政 漏 之 处 再 所 难免 。 布 望 大 家 能 人 够 多 
多 给 予 客 容 并 提出 宝贵 的 建议 。 我 将 在 本 书 的 后 续 版 本 中 不 断 丰 晤 内 
容 、 修 改 错误 ， 让 这 本 书 成 为 一 本 “ 活 书 ”、 一 直 为 大 家 服务 下 去 。 本 书 
的 纠 错 及 更 正 将 发 布 在 http://www.cnblogs.com/prism。 我 的 MSN 是 
wpfgeek@live.com， 期 符 与 热爱 WPF 技 术 的 朋友 共同 学 习 和 探讨 。 
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WPF What & Why 


目 古 以 来 ， 生 产 工 具 束 代表 着 生产 力 的 先进 程度 一 生产力 的 发 展 
要 求人 们 不 断 研 有 友 出 新 的 生产 工具 ， 痢 生产 工具 的 诞生 又 使 生产 效率 出 
现 飞 路 。 作 为 劳动 生产 的 一 种 ， 计 算 机 软件 开发 也 需要 工具 ， 随 看 程序 
员 们 手中 的 工具 越 来 越 强 大 ， 软 件 开 发 的 效率 和 质量 也 越 来 越 吕 。 善 于 
学 习 和 尝 握 新 工具 、 新 技术 的 程序 员 们 也 忌 是 能 得 到 更 多 的 实惠 。 

微软 Windows 操 作 系 统 成 功 推出 已 有 十 多 年 ， 在 Windows 系 统 平台 
上 从 事 图 形 用 户 界 面 〈Graphic User Interface, GUI) 程序 开发 的 程序 员 
数不胜数 。GUI 程 序 员 们 手中 的 开 及 工具 历经 了 Win32 APIS MFC ( 
同类 产品 ) > ActiveX/COM/Visual Basic o Windows Forms 的 变迁 ， 每 一 
次 杰 迁 都 使 开发 效率 和 质量 产生 尺 跃 。 从 2007 年 开始 ， 微 软 推出 了 它 的 
狐 一 代 GUI 开 发 工具 Windows Presentation Foundation C B É ZJWindows 
表示 基础 ，WPF) ， 并 且 把 WPF 定 为 未 来 十 年 Windows 平 台 GUI 开 有 的 
主要 技术 。 时 至 今日 ， 不 但 Windows Vista, Windows 7, Windows 
Server 2008. Windows Server 2008 R2 等 系统 已 经 无 颖 集成 WPF， 连 
Visual Studio 2010 等 重要 产品 业已 使 用 WPF 进 行 开 友 。 可 见 人 微软 在 WPF 
拉 术 方面 的 务实 精神 与 决心 。 


什么 是 WPF 


WPF 是 Windows Presentation Foundation 的 人 简称， 顾名思义 是 专门 用 
来 编写 程序 表示 层 的 拉 术 和 工具 。 

WPF 是 做 什么 用 的 呢 ? 让 我 们 从 分 析 一 个 客户 的 需求 开始 ， 解 答 这 
个 问题 。 经 和 常会 有 一 些 朋 友 找 我 与 项 目 ， 有 一 次 ， 一 家 医疗 单位 的 技术 
主管 找到 我 说 : “你 能 不 能 用 WPE 为 我 们 开发 一 父 管 理 系统 蚜 ? ”其 实 ， 
这 就是 一 个 对 WPF 的 典型 误解 。 误 解 在 何 处 呢 ? 主要 是 没有 弄 清 WPF 的 
功用 。 妆 今 的 程序 ， 除 了 一 些 韭 党 小 巧 的 实用 工具 外 ， 大 部 分 程序 都 是 
多 层 架 构 的 程序 。 一 提 到 多 层 架 构 ， 一 般 束 至 少 包含 3 层 : 数据 层 、 业 
务 逻 辑 层 和 表示 层 “〈 它 们 的 关系 如 图 1 所 示 ) 。 
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图 1 

这 3 层 的 功能 大 致 如 下 : 

e Xu: 用 于 存储 数据 ， 多 由 数据 库 构 成 ， 有 时候 也 用 数据 文 
件 能 辅助 存储 数据 。 比 如 医院 的 药品 列表 、 人 员 列 表 、 病 例 列 表 等 都 存 
储 在 这 一 层 。 

e 业务 逻辑 层 ， 用 于 根据 需求 使 用 计 宽 机 程序 表达 现实 的 业务 他 
辑 。 比 如 哪些 医生 可 以 给 哪些 病人 看 病 ， 从 挂号 到 取 药 都 有 什么 流程 ， 
从 住院 到 出 院 有 哪些 流程 ， 都 可 以 由 这 层 来 实现 。 这 一 层 一 般 会 通过 一 
组 服务 (Service) 回 表 示 层 公开 目 己 的 各 个 功能 。 因 为 这 一 层 需要 与 数 
据 层 进行 交互 ， 所 以 经 常会 划分 出 一 个 名 为 “数据 访问 层 ”(Data Access 
Layer, DAL) 的 子 层 专门 负责 数据 的 存 取 。 

e Xm: 负 贡 把 数据 和 流程 展示 给 用 户 看 。 对 于 同一 组 来 日 业 
务 逻 辑 层 的 数据 ， 我 们 可 以 选择 多 种 表达 方式 。 比 如 对 于 同一 张 药品 
单 ， 如 果 想 以 短信 的 形式 有 发送 给 药房 ， 可 以 以 一 串 字 符 的 形式 来 表达 ; 
如 有 果 客 户 想 打印 药品 单 的 详细 内 容 ， 可 以 以 表格 的 形式 来 表达 ; 如 果 客 
户 想 直观 地 看 到 每 种 药品 占 总 价格 的 比例 ， 我 们 可 以 使 用 饼 图 来 表达 。 
除了 用 于 表示 数据 ， 表 示 层 还 负责 展示 流程 、 啊 应 用 户 操 作 等 。 而 且 ， 
表示 层 程 序 并 不 拘泥 于 果 面 程序 ， 很 多 表示 层 程序 都 运行 在 手机 或 浏览 
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WPF 有 的 功能 束 是 用 来 编写 应 用 程序 的 表示 层 ， 公 于 业务 逻辑 层 和 数 
据 层 的 开发 也 有 专门 的 新 技术 。 比 如 业务 逻辑 层 的 新 技术 是 
WCF (Windows Communication Foundation) 和 WF (Windows Workflow 
Foundation) 。 人 微软 平台 上 用 于 开发 表示 层 的 技术 不 算 少 ， 包 括 WPF、 
Windows Forms、ASP.NET、Silverlight 等 。 换 句 话说 ， 无 论 使 用 哪 种 技 
术 作 为 表示 层 技 术 ， 程 序 的 馆 辑 层 和 数据 层 都 是 相同 的 。 所 以 “使 用 
WPF 开 发 管理 系统 ”这 个 提 法 是 不 对 的 。 


WPF 与 Silverlight 的 关系 


目前 ，.NET 开 发 人 员 学 习 WPF 的 回报 是 相当 高 的 ， 原 因 是 几乎 整 
个 微软 新 一 代 开发 框架 都 能 看 到 WPF 的 有 影子。 微软 的 新 一 代 开发 技术 框 


Z8 8d 5 Windows Presentation Foundation (WPF) ~、 Windows 
Communication Foundation (WCF) fl Windows Workflow 


Foundation (WF， 据 说 因为 与 World Wildlife Fund 的 缩写 WWF 冲 突 了 ， 
所 以 去 挥 了 一 个 W) 。 本 书 无 疑 是 讲 WPF， 而 WCF 的 用 途 是 编写 分 布 式 
应 用 程序 的 业务 地 辑 层 ， 并 以 网 络 服 务 的 形式 蚂 器 给 客户 病 的 服务 消费 
者 ， 基 于 WCF 和 Entity FrameworkHJWCF Data Service 科 WCF RIA 
Service 古 微软 运 今 最 佳 的 数据 访问 层 ， 而 这 一 数据 访问 层 的 最 佳 消费 者 
就 是 WPF 和 Silverlight。 所 以 ， 学 习 WPEF 技 术 可 以 为 WCF 的 学 习 锅 上 还 
化 。WF 的 主要 作用 是 设计 工作 流 ， 而 设计 工作 流 的 编程 语言 正 是 WPF 
中 的 界面 设计 语言 一 一 XAML， 也 就 是 说 ， 学 习 完 WPF，WF 也 会 了 一 
Jes 

如 采 说 学 会 WPF 后 WE 算是 会 了 一 小 半 ， 那 么 学 习 完 WPF 后 ， 
Silverlight 可 以 算是 会 了 80% ， 为 什么 这 么 说 呢 ? DSL JI Js AS LAE X. 
Silverlight 是 WPF 的 一 个 子 集 、 是 WPF 的 “网 络 版 ”(Silverlight 的 开发 代 
写 是 WPF/E， 意 为 WPF 简 化 版 ”。 为 了 让 WPF 在 浏览 器 里 跑 起 来 ， 微 软 
所 做 的 事情 不是 在 技术 理念 不 变 的 情况 下 对 WPF 进 行 “ 瘦 里 ”一 一 去 挥 一 
些 不 常用 的 功能 、 简 化 一 些 功能 的 实现 ， 对 多 组 实现 同一 目的 的 类 库 进 
行 删 减 、 只 保留 一 组 ， 再 添加 一 些 网 络 通 信 的 功能 。 通 过 下 表 ， 我 们 整 
能 看 到 Silverlight 与 WPF 的 技术 重 登 率 之 高 : 


技术 项 目 在 Silverlight 中 
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控件 

布局 Ju Ju Ë 
Binding 基本 完整 
依赖 属性 完整 基本 完整 
路 由 事件 完整 间 化 

节令 TE k 

资源 

控件 模板 JS Ku 
P DA R 基本 完整 
d 元 整 
2D/3D 动画 间 化 





如 今 Silverlight 久 手 可 热 的 男 一 个 原因 是 微软 狐 一 代 手 机 平台 
Windows Phone 7 也 采用 它 来 作为 开发 平台 〈 此 前 的 Windows Mobile £ 
统 使 用 的 是 简化 版 的 Windows Forms HRF) 。Windows Phone 7 中 运 
行 的 Silverlight 与 浏览 器 中 运行 的 Silverlight 别 无 二 致 ， 因 此 学 习 完 WPF 
之 后 连 手机 平台 上 的 程序 也 会 号 了 。 

所 以 说 和 学习 WPEF 是 “一 本 万 利 ” 的 投资 ， 一 点 也 不 过 分 


为 什么 要 学 习 WPF 


有 的 朋友 会 问 : 既然 已 经 有 这 么 多 表示 层 技术 ， 为 什么 还 要 推出 
WPF 技 术 呢 ? 我 们 花 精 力学 习 WPEF 技 术 有 什么 收益 和 好 处 呢 ? 这 个 问题 
可 以 从 两 方面 来 回答 。 

opa AA a 
道 ， 它 们 分 别 是 

e 数据 模型 : 现实 世界 中 事物 和 志和 辑 的 抽象 。 

e 业务 逻辑 : 数据 模型 之 则 的 关系 与 交互 。 

e 用 户 界 面 : 由 控件 构成 的 、 与 用 户 进 行 交 互 的 界面 ， 用 于 把 数 
据 展 示 给 用 户 并 啊 应 用 户 的 输入 。 


e 界面 逻辑 : 控件 与 控制 之 间 的 关系 与 交互 。 
这 4 种 代码 的 关系 如 图 2 所 示 。 
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| 数据 模型 


图 2 


在 保持 代码 可 维护 性 的 前 提 下 ， 如 何 让 数据 能 够 顺畅 地 到 达 界 面 并 
灵活 显示 ， 同 时 方便 地 接收 用 户 的 操作 历来 都 是 表示 层 开 发 的 核心 问 
题 。 为 此 ， 人 们 研究 出 了 各 种 各 样 的 设计 模式 ， 其 中 有 经 久 不 衰 的 
MVC (CModel-View-Controler) 模式 、MVP (Model-Viev-Presenter) £ 
式 等 。 在 WPF 出 现 之 前 ，Windows Forms. ASP.NET (Web Forms) 等 
技术 均 使 用 “事件 驱动 ”理念 ， 这 种 由 “事件 订阅 事件 处 理 帮 ”关系 交 
织 在 一 起 构成 的 程序 ， 尽 管 可 以 使 用 MVC、MVP 等 设计 模式 ， 但 一 不 
小 心 束 会 使 界面 迎 辑 和 业务 逻辑 纠缠 在 一 起 ， 造 成 代码 变 得 复 林 难 异 、 
bug 难 以 排除 。 而 WPEF 扩 术 则 是 微软 在 开 友 理念 上 的 一 次 升级 H “R 
件 驱 动 ” 变 为 “数据 驱动 ”。 

事件 驱动 时 代 ， 用 户 每 进行 一 个 操作 用 会 激发 程序 发 生 一 个 事件 ， 
事件 发 生 后 ， 用 于 啊 应 事件 的 事件 处 理 需 束 会 执行 。 事 件 处 理 需 是 一 个 
方法 (函数 ) ， 在 这 个 方法 中 ， 程 序 员 可 以 处 理 数据 或 调用 别 的 方法 ， 
这 样 ， 程 友 束 在 事件 的 驱动 下 同 前 执行 了 。 可 见 ， 事件 驱动 时 代 的 数据 
是 静态 的 、 被 动 的 ， 界 面 控 件 是 主动 鸭 、 界 面馆 辑 与 业务 逻辑 之 国 的 桥 
染 是 事件 。 而 数据 驱动 正好 相反 ， 当 数据 发 生变 化 时 ， 会 主动 通知 界面 
控件 、 推 动 控 件 展 示 最 新 的 数据 ; 同时 ， 用 户 对 控件 的 操作 会 直接 壕 达 
数据 ， 束 好像 控件 是 “透明 ”的 。 可 见 ， 在 数据 驱动 理念 中 ， 数 据 占据 主 
动 地 位 、 控 件 和 控件 事件 被 弱化 (控件 事件 一 般 只 参与 界面 远 辑 ， 不 再 
染指 业务 人 逻辑 ， 使 程序 复杂 撒 得 到 有 效 控 制 ) 。WPF 中 ， 数 据 与 控件 的 
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和 位 而 语 之 ，WPF 的 开 友 理念 更 符合 日 然 冰 学 的 忠 想 (除了 Data 
Binding 之 外 ， 还 有 Data Template 和 Control Template 和 等， 本 书 都 将 看 力 
eda 使 用 WPF 进 行 开 发 较 之 Windows Forms 开 发 要 简单 ， 程 序 更 加 
TR] Ts TES HT e 

其 次 ， 敏 软 已 经 把 WPF 的 理念 扩展 到 了 几乎 全 部 开 有 友 平 侣 ， 包 括 果 
面 平 台 、 浏 览 器 平台 和 手机 平台 。WPF 的 完整 版 可 用 于 在 Windows 平 台 
二 开 肥 条 面 应 用 程序 〈 这 些 果 面 应 用 程序 也 可 以 运行 在 浏 讽 厦 中) ; 
WPF 的 “人 简化 版 "， 也 就 是 Silverlight， 不 但 可 以 用 于 编写 运行 在 浏览 占 中 
AA) mE (Rich Internet Application) ， 也 可 以 用 于 编写 运行 于 微 
软 最 新 手机 平台 Windows Phone 7 中 的 程序 。 所 有 这 些 程序 的 开发 理念 
部 是 一 样 的 ， 仅 在 类 库 方 面 有 细微 的 兰 别 ， 也 驶 旦 说 ， 学 会 WPF 开 及 ， 
Silverlight 开 及 和 Windows Phone 7 开 肥 均 可 触 类 劳 通 。 所 以 学 习 WPE 的 
发 展 前 景 非 党 好 、 回 报 很 大 ， 投 入 些 精力 是 非常 全 得 的 。 

最 后 ， 为 大 家 提供 一 个 微软 官方 集 动 男 和 效果 为 一 体 的 实例 ， 
photoSuru。 下 载 地 址 是 : 
http://windowsclient.net/appfeeds/SubscriptionCenter/Gallery/photosuru.aspx 
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本 书 的 出 版 要 感谢 中 国 水 利水 电 出 版 社 万 水 分 社 的 周 春 元 编辑 。 在 
整个 成 书 过 程 中 ， 春 元 匈 一 下 你 持 看 极 大 的 耐心 ， 忆 是 给 予 我 雁 城 的 文 
持 和 或 励 。 记 得 有 一 次 ， 我 对 目 己 的 扩 术 水 乎 不 够 目 信 ， 春 元 郊 问 
我 :“ 你 为 什么 要 与 这 本 书 ? ”我 说 是 想 为 学 习 WPF 的 朋友 做 操 事 情 、 对 
中 国 的 开行 业 做 点 推动 。 春 元 兄 说 :“ 是 啊 ! 所 以 只 要 你 尽心 尽力 、 把 
真知 奉献 给 读者 ， 束 已 经 是 在 帮助 大 家 学 习 、 实 现 目 己 的 理想 了 。 公 于 
书 是 不 是 好 卖 ， 这 个 不 用 担心 ， 只 要 是 好 书 ， 融 算 赔 春 钱 我 们 也 要 出 、 
也 要 忌 。” 当 我 思路 档 竭 的 时 候 ， 春 元 兄 从 来 没有 以 稳 期 为 由 众 过 我 ， 
只 是 或 励 我 让 我 静 下 心 来 慢 慢 写 ; 春 元 匈 也 从 来 没有 要 求 我 为 迎合 销售 
而 对 书稿 做 丝 坚 改动 ， 征 春 元 郊 帮 助 我 你 证 了 这 本 书 是 一 本 没有 钢 具 、 
人 不迭 杂 名 利 的 书 。 

最 让 我 感动 的 是 ， 为 了 你 证 本 书 的 质量 ， 春 元 元 作为 一 个 非 计算 栅 
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很 多 非常 宝 贯 的 意见 和 见解 ， 有 些 意 见 甚至 精确 到 一 个 词 或 一 个 字母 的 
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成 书 过 程 中 与 我 直接 沟通 的 是 春 元 元 ， 但 站 在 春 元 兄 肯 后 的 是 一 个 
完整 的 编辑 团队 一 一 他 们 默默 无 逆 地 工作 着 ， 保 证 书籍 以 最 快 的 速度 、 
最 优雅 的 阅读 体验 、 最 精美 的 印刷 与 读者 们 见面 。 在 此 ， 辣 杨 元 浴 、 邮 
海 家 、 陈 涪 等 编辑 朋友 致 以 真 碱 的 感 吝 。 

我 乙 所 以 能 成 为 程序 员 、 成 为 技术 作者 ， 首 先 要 感谢 我 的 父母 ， 征 
他 们 声 养 我 勤 于 动手 、 乐 于 思 知 、 普 本 表达 。 刘 晓 林 先生 是 我 的 计算 机 
局 蒙 老 师 ， 如 果 没 有 他 市 我 从 DOS 学 起 ， 很 难 想 象 我 会 成 为 一 名 程序 
员 。 初 中 的 季 全 兴 老 师 和 高 中 的 孚 惠 清 老师 是 两 位 对 我 影响 最 大 的 语文 
老师 ， 没 有 二 位 老师 在 写作 方面 的 指导 和 儿 助 ， 列 说 十 写 书 ， 妨 怕 写 作 
文 午 成 问题 。 一 路 走 来 ， 有 民 师 ， 还 有 益 到 一 一 刘 扬 、 张 博 、 谢 志 威 、 
单 城 等 ， 他 们 不 但 是 在 计算 机 和 学习 方面 对 我 帮助 最 大 的 朋友 ， 也 是 我 的 
知心 朋友 ， 在 此 ， 对 你 们 表示 袁 心 的 感谢 ， 愿 友谊 长 育 ! 

在 成 长 过 程 中 ， 无 数 的 朋友 帮助 过 我 、 引 导 过 我 ， 众 多 的 领导 关心 
我 、 勤 励 我 ， 在 此 一 并 表示 感谢 。 如 今 的 我 已 经 情 得 在 平和 中 稳步 前 
行 ， 而 在 此 之 前 ， 很 多 前 进 的 动力 则 来 源 于 挫折 和 挑战 ， 对 几经 的 挫折 





与 挑战 ， 我 也 表示 深 深 的 感谢 itii 
XE. 
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j Redmond, Microsoft Building Mil-E 








1 
XAML 概览 


1.1 XAMEL 是 什么 


目 人 类 社会 诞生 ， 社 会 分 工 束 在 不 断 地 进行 着 。 从 原始 社会 畜牧 业 
与 农业 分 离 到 当今 数 以 万 计 行 业 的 存在 ， 无 不 是 社会 分 工 的 杰作 。 社 会 
分 工 的 意义 在 于 它 能 使 从 事 固定 工作 的 人 和 群 更 加 专业 化 ， 并 通过 合作 的 
形 却 提高 生产 效率 。 换 句 话 说 ， 在 合作 不 是 问题 的 情况 下 ， 寿 干 群 专业 
人 士 配 合 工 作 要 比 同等 数量 的 一 群 “ 大 而 全 ”人 士 的 工作 效率 珊 。 

这 种 分 工 与 合作 的 关系 不 仅 存在 于 行业 之 间 ， 也 存在 于 行业 内 部 。 
软件 开发 中 最 典型 的 分 工 合作 束 是 设计 师 (Designer) 与 程序 员 
(Programmer) 之 间 的 协作 。 在 WPF 出 现 之 前 ， 协 作 一 般 是 这 样 展 开 


的 : 

(1) 需求 分 析 结 束 后 ， 程 序 员 对 照 需求 设计 一 个 用 户 界 和 面 CUser 
Interface, UD. 的 日 图 ， 然 后 把 精力 主要 放 在 实现 软件 的 功能 上 。 

(2) 与 此 同时 ， 议 计 师 们 对 照 需求 、 考 虑 用 户 的 使 用 体验 〈User 
Experience, UX) 、 使 用 专门 的 设计 工具 《比如 Photoshop) 设计 出 优美 
而 实用 的 UI。 

i "m 最 后 ， 程 序 员 按照 设计 师 绘 制 的 效果 图 ， 使 用 编程 语言 实现 
次 件 的 UI。 

经 验 告 诉 我 们 ， 即 便 是 优秀 的 说 计 师 团队 和 优秀 的 开发 团队 合作 ， 
化 费 在 沟通 和 最 终 整 合 上 的 精力 也 是 巨大 的 。 经 和 出 现 的 问题 有 : 

e 讽 计 师 的 设计 跟 不 上 程序 饮 辑 的 变化 。 

e 程序 员 未 能 完全 实现 设计 师 提 供 的 效果 图 。 

e 效果 图 与 程序 功能 不 能 完全 匹配 。 

e 从 效果 疼 到 软件 UI 的 转化 耗费 很 多 时 间 。 

这 些 并 不 是 谁 对 谁 错 的 问题 只 要 存在 分 工 ， 合 作 的 成 本 就 不 可 
能 为 零 。 问 题 的 核心 在 于 ， 设 计 师 与 程序 员 的 合作 是 “ 串 行 ?的 ， 即 先 由 
设计 师 完 成 效果 图 、 再 由 程序 员 退 过 编程 实现 。 如 果 设 计 师 能 与 程序 
员 “ 并 行 ” 工 作 并 直接 参与 到 程序 的 开发 中 来 ， 上 述 问 题 束 解决 了 了。 

解决 方案 是 什么 呢 ? 是 让 设计 师 们 使 用 编程 语言 来 设计 UI 效 果 图 ， 
还 是 让 程序 员 们 使 用 Photoshop 来 开发 程序 ? 显然 都 行 不 通 。 





网 络 程序 开 有 团队 的 经 验 倒是 很 值得 信和 鉴 : 草图 产生 后 ， 设 计 师 们 
可 以 使 用 HTML、CSS、JavaScript 直 接生 成 UI， 程 序 员 则 在 这 个 UI 产 生 
的 同时 实现 它 背 后 的 功能 远 辑 。 在 这 个 并 行 的 合作 中 ， 设 计 师 们 可 以 使 
用 Dreamweaver 等 设计 工具 ， 程 序 员 使 用 Visual Studio 来 进行 后 侣 编程 。 
有 经 验 的 设计 师 和 程序 员 往 往 还 具备 互 换 工具 的 能 力 ， 使 得 他 们 能 基于 
HTML+CSS+JavaScript 这 个 平台 进行 有 效 的 沟通 。 

为 了 把 这 种 开 肥 模 陈 从 网 络 开 及 移植 到 果 面 开 肥 和 军 巡 人体 网 络 程序 
的 开 有 上， 微软 创造 了 一 种 新 的 开 及 语言 一 一 XAML (PefEZaml) 。 
XAML 的 全 称 是 Extensible Application Markup Language， 即 可 扩展 应 用 
程序 标记 语言 。 它 在 果 面 开发 及 曲 媒 体 网 络 程 序 的 开 友 中 扮演 本 
HTML+CSS+JavaScript 的 角色 、 成 为 设计 师 与 程序 员 之 间 沟 通 的 枢纽 。 

现在 ， 设 计 师 和 程序 员 们 一 起 工作 、 共 同 维护 软件 的 版 本 ， 只 古 他 
们 使 用 的 工具 不 同 设计 师 们 使 用 Blend Cot&xExpressionie il LEE 
件 中 的 一 个 ) 来 设计 UI， 程 序 员 则 使 用 Visual Studio H S Ja AZER 
僻 。Blend 使 用 起 来 很 像 Photoshop 等 设计 工具 ， 因 此 可 以 最 大 限度 地 友 
挥 出 设计 师 的 特长 。 使 用 它 ， 设 计 师 不 但 可 以 制作 出 绚丽 多 彩 的 静态 
UI， 还 可 以 让 UI 包 含 动 男 虽然 程序 员 们 也 能 做 出 这 些 东 西 ， 但 从 专 
业 性 、 时 间 开 销 以 及 技术 要 求 上 显然 是 划 不 来 的 。 更 重要 的 是 ， 这 些 绚 
丽 的 UI 和 动画 都 会 以 XAML 的 形式 直接 保存 进项 目 ， 无 需 转化 就 可 以 直 
SmE, TA S KÆ EMRE. 
注意 
| 下 次 ， 当 你 在 面试 被 问 到 “什么 是 XAML? 时 ， 你 可 以 回答 : XAML 是 WPF 技 术 中 专门 用 于 


设计 UI 的 语言 。 











1.2 XAMEL 的 优点 


Bi f — 753 525 m34 13 8& f XAMLBJJUT JG pi: 
e XAML 可 以 设计 出 专业 的 UI 和 动画 好 用 。 
e XAML 不 需要 专业 的 编程 知识 ， 它 简单 易 懂 、 结 构 清晰 一 一 易 





" e ER EA Ee 随时 沟通 、 无 需 二 次 转 
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自从 应 用 程序 从 控制 台 界 面 (Console User Interface, CUD 升级 为 
图 形 用 户 界 面 〈Graphic User Interface, GUI)〉 后 ， 程 序 员 们 就 一 直 妃 求 
将 视图 CView, tELZEUD 与 逆 辑 代码 的 分 离 。 以 往 的 开发 模式 中 ， 
程序 员 很 难保 证 用 来 实现 UI 的 代码 完 全 不 与 用 来 实现 程序 地 辑 的 代码 纠 
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往 市 来 以 下 的 后 采 : 

e 无 论 是 软件 的 功能 还 是 UI 设计 有 所 变化 或 者 是 出 了 bug， 痢 将 导 
致 大 量 代 码 的 修改 。 

e 会 让 远 辑 代 人 码 更 加 难以 理解 一 一 修改 往往 比重 写 更 困难 ， 因 为 
TE AE DX BI S To ET e 

e 重用 人 逻辑 代码 变 成 了 Mission Impossible. 

XAML ~- TERMAN E: 它 帮 助 开 发 团队 真正 实现 了 UI 与 远 
和 辑 的 和 剥离。XAML 是 一 种 单纯 的 声明 型 语言 ， 也 就 是 说 ， 它 只 能 用 来 声 
明 一 些 UI 元 素 、 绘 制 UI 和 动画 《在 XAML 里 实现 动画 是 不 需要 编程 
HJ) ， 根 本 无 法 在 其 中 加 入 程序 饮 辑 ， 这 融 强 制 地 把 旬 辑 代码 从 UI 代 但 
中 赶 走 了。 这 样 ， 与 UI 相关 的 元 系统 统 集中 在 程序 的 UI 层 、 与 逻辑 相关 
的 代码 统统 集中 在 程序 逻辑 层 ， 形 成 了 一 种 “高 内 聚 一 低 炸 合 ” 的 结构 。 
形成 这 种 结构 后 ， 无 论 是 对 UI 进 行 较 大 改动 还 是 打算 重用 搬 层 馆 辑 ， 都 
不 会 化 费 太 大 力气 。 这 残 好 比 有 一 天 你 给 A 和 客户 做 了 一 个 橘子 ，A 和 客户 
很 喜欢 ; A 和 客户 把 你 的 产品 介绍 给 了 B 和 客户 ，B 和 客户 很 喜欢 橘子 味道 ， 但 
PECA CANER AXR, WRR mawT AAR E 
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件 的 “ 换 肤 ”行为 ，WPEF 提 供 了 丰 遇 的 Template 功 能 ， 将 在 后 面 详 述 ) 。 








2 
从 去 起 步 认 识 XAMIL 


尽管 在 命令 行 模式 下 直接 使 用 编译 器 把 XAML 文 件 编译 成 程序 ， 能 
够 让 我 们 更 加 清晰 地 欣赏 XAML 人 代码， 但 我 一 直 不 认为 那 是 一 种 对 待 初 
学 者 足够 “友好 ”的 方式 。 更 何况 XAML 本 来 就 是 为 了 “可 视 化 ”UI 设计 准 
备 的 ， 我 们 何必 再 “ 蒙 上 了 眼睛” 编程、 自己 折磨 自己 呢 ?” 因 此 ， 还 是 让 我 
们 在 Visual Studio 2008 (简称 VS 2008) 里 开始 XAMIL 之 旅 吧 ! 


21 ”新建 WPF 项 日 
在 新 建 项 目 之 前 ， 先 让 我 们 看 看 什么 是 “项 目 模板 ”。 在 Visual 


Studio 2008 中 ， 当 你 使 用 File o New -Project 菜 单 命 令 时 ， 会 弹出 如 图 2- 
1 所 示 的 窗口 。 








New Project 


Project types: 


Business Intelligence Projects 





Templates: 


Visual Studio installed templates 


[2 2 d zug 


Web Windows Class Library WPF WPF Browser Console 
Smart Device Forms Ap... Application Application Application 
Office 

Database | 四 se e edi ze 
Reporting Empty Windows WPF Custom WPFUser Windows 
Silverlight Project Service Control Lib.. Control. — Forms.. 
SSIS ScriptComponent 
SSIS ScriptTask 

Test 

WCE W 
Workflow search 
Online Te... 

















My Templates 


Database Projects 
Win Tum a Foundation client application (,NET Framework 3.5) 
Name: WpfApplicationl 
Location: CAUsers Administrator Documents Visual Studio 2008 Projects 


Solution Name — WpfAppliationl 








图 2-1 项 目 模板 窗口 


个 窗口 吏 是 项 目 模 板 窗口 (也 有 人 称 之 为 “ 狐 建 项 目 问 导 ” 窗 

B ER (Template) 也 束 是 “模具 ”和 “样板 ”。 项 目 模板 ， 意 思 是 说 

c ERE HERI OR. 写 出 来 的 束 是 哪 种 程序 。 为 什么 要 使 用 项 目 模 板 
呢 ? 大 家 知道 ， 为 了 满足 用 户 的 各 种 需求 ， 能 在 Windows 上 运行 的 程序 
种 类 能 达到 数 十 种 之 多 。 想 要 得 到 一 个 程序 ， 首 先 要 由 程序 员 使 用 编程 
语 言 编写 出 源 代 人 码 ， 然 后 再 使 用 编译 右 将 源 代 人 码 编译 成 成 品 程 序 。 编 详 
噩 也 是 一 个 程序 ， 它 的 职责 束 是 把 源 代 人 码 编译 成 目标 程序 。 在 编译 过 程 
中 ， 编 详 医 会 根据 它 获得 的 指令 ， 把 源 代 码 编译 成 相应 种 类 的 程序 。 束 
拿 C# 语 言 的 编 详 需 来 说 ， 同 样 一 段 代 码 ， 如 果 在 编 详 时 使 用 了/t:exe 参 


数 ， 那 么 将 编译 出 一 个 命令 行程 序 (Console Application? ， 如 果 
把 上 exe 换 成 全 winexe， 则 编译 结 末 是 一 个 图 形 用 户 弄 面 程 序 (GUI 
Application) ， 如 果 把 /t:winexe 换 成 /t:library， 则 编译 结果 是 一 个 动态 链 
接 库 (Dynamic Link Library, DLL) 。 

C# 的 编译 占有 几 十 个 参数 ， 每 种 应 用 程序 都 有 相应 的 编译 参 数 ， 这 
还 不 算 有 些 种 类 的 应 用 程序 需要 在 源 代 人 码 中 进行 相应 的 配置 (如 需要 哪 
些 文 件 和 文件 来、 代码 的 基本 格式 是 什么 样 ) 。 如 条 每 次 与 程序 都 让 程 
友 员 手动 配置 这 些 参数 和 初始 设置 ， 那 开销 束 太 大 了 ， 因 此 ,VS 2008 
准备 了 对 应 各 种 应 用 程序 的 模板 。 所 以 ， 当 你 选择 了 哪个 和 模板， 实际 上 
E 2008 H z/J BO BLUT. f d VERI AOT E ERE Y — 25 AKHUURAN 
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檬 板 里 选择 WPFApplication， 并 在 窗口 下 部 Name 文 本 框 里 填写 
MyFirstWpfApplication， 然 后 单 击 OK 按钮 ， 一 个 基本 的 WPF 项 目 就 创 
建 好 了 。 执 行 Debug > Start Debugging k ap» Ei f H] LARA ER 
cg ， 碌 可 以 编译 这 个 程序 并 在 调试 模式 下 局 动 
它 ， 如 图 2-2 所 示 。 


š ` Windowl 








图 2-2 ”启动 MyFirstWpfApplication 后 的 运行 结 
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fESolution Explorer 窗 口 〈 可 通过 View 5 Solution Explorer% m 4 
显示 ) 中 我 们 可 以 看 到 ，VS 2008 的 WPF 项 目 模板 为 我 们 准备 了 一 系列 
源 代码 ， 如 图 2-3 所 示 。 


a | à» m & 


"T wand = iiia aea (1 project) 








=a Properties 
. ba References 
. pœ App.xaml 














. pe Windowl.xaml 





图 2-3 VS 2008H]WPFJI H£ F ELSE HJ JT ACTES 
可 以 把 所 有 “+2? 都 展开 ， 如 图 2-4 所 示 。 


Solution Explorer - MyFirstWpfApplication 
IHE 
"T solution MyFirstWpfApplication (1 project) 
B- 一 Properties 
| 5 Œ] Assemblylnfo.cs 
à E- Resources.resx 
| — WV Resources.Designer.cs 
H| Settings.settings 
| +) Settings.Designer.cs 
5- _ References 
— {D PresentationCore 
— {D PresentationFramework 
^- «L3 System 
— 3 System.Core 
: -本 System.Data 
x . «23 System.Data.DataSetExtensions 
x . «23 System.Xml 
x . «£3 System.Xml.Linq 
3 WindowsBase 
9: d ollis: 
|— v V App.xaml.cs 


























2. “e Windowl.xaml 
L *J Windowl.xaml.cs 





图 2-4” 源 代码 文件 夹 中 包含 的 内 容 


下 面 来 介绍 一 下 这 些 分 支 都 是 做 什么 的 : 

° Properties) 3; 里 面 的 主要 和 内容 是 程序 要 用 到 的 一 些 资 源 《〈 如 
Eb. AE. PERTE) 和 配置 信息 。 

e References 分 文 : 标记 了 当前 这 个 项 目 需 要 引用 哪些 其 他 的 项 


— > 


目 。 目 前 里 面 列 出 来 的 条 目 都 是 .NET Framework 中 的 类 库 ， 有 时 候 还 要 


还 加 其 他 .NET Framework 类 库 或 其 他 程序 员 编 写 的 项 目 及 类 库 。 

e App.xaml 分 文 : 程序 的 主体 。 大 家 知道 ， 在 Windows 系 统 里 ， 
一 个 程序 惑 是 一 个 进程 (Process) 。Windows 还 规定 ， 一 个 GUI 进 程 需 
要 有 一 个 窗 体 “(Window) 作为 “ 主 窗 体 ”。App.xaml 文 件 的 作用 束 是 声 
明了 程序 的 进程 会 是 谁 ， 同 时 指定 了 程序 的 主 窗 体 是 谁 。 在 这 个 分 文 里 
还 有 一 个 文件 一 一 App.xaml.cs， 它 是 App.xaml 的 后 人 台 人 代码 。 

e Window1l.xaml 分 文 : 程序 的 主 窗 体 。 上 和 面 我 们 看 到 的 图 2-2 所 示 
的 那个 窗口 束 是 由 它 声 明 的 。 它 也 上 共有 自己 的 后 台 代 公 
Window1.xaml.cs。 默 认 地 ，VS 2008 会 为 我 们 打开 以 上 两 个 文件 。 对 于 
XAML 文 件 ，VS 2008 还 具有 “所 见 即 所 得 ”的 可 视 化 编辑 能 力 ， 你 可 以 
在 XAML 代 和 码 和 预 贤 视图 之 间 切 换 〈 切 换 标签 在 编辑 需 确 部 ) ， 也 可 以 
纵 回 或 横 同 地 同时 显示 XAMEL 人 代码 和 预 宽 视 图。 


22 NT e f XAML 


7] Br E E i xe Window1.xambHAll'E WJ Ji GARA. fEWindow1.xamL x 
件 里 能 看 到 如 下 代码 : 


«Window x:Class="MyFirstiVpfApplication.Windowl" 





xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-" http;//schemas.microsoft.com/winfx/2006/xaml" 

Title-" Window" Height-" 300" Width" 300" 

«and» 


«land» 


«Window? 


人 花花 绿绿 一 大 片 、 还 有 两 个 看 着 很 像 主页 地 址 的 东西 ..… 它 们 都 是 
Fë ZW? 让 我 们 来 一 个 一 个 地 分 析 。 

XAML 是 一 种 由 XML 派生 而 来 的 语言 ， 所 以 很 多 XML 中 的 概念 在 
XAML 是 通用 的 。 比 如 ， 使 用 标签 声明 一 个 元 素 〈 每 个 元 素 对 应 内 存 中 
的 一 个 对 象 )》 时 ， 需 要 使 用 起 始 标 签 <Tag> 和 终止 标签 </Tag>， 夹 在 起 
始 标 签 和 终止 标签 中 的 XAML 代 码 表 示 是 隶属 于 这 个 标签 的 内 容 。 如 果 
没有 什么 内 容 隶 属于 某 个 标签 ， 则 这 个 标签 称 为 空 标签 ， 可 以 写 为 
< ag/>。 

为 了 表示 同类 标签 中 的 某 个 标签 与 众 不 同 ， 可 以 给 它 的 特征 
(Attribute) 赋值 。 为 特征 赋值 的 语法 如 下 : 


e 非 空 标签 : «Tag Attribute1=Value1 
Attribute2=Value2>Content</Tag> 

e 至 标签 : <TagAttributel=Valuel Attribute2=Value2/> 

在 这 里 ， 有 必要 把 Attribute 和 Property 这 两 个 词 仔细 地 辨别 一 下 。 

这 两 个 词 的 混 清 由 来 已 人 。 泥 清 的 主要 原因 束 是 大 多 数 中 文 译本 里 
既 把 Attribute 译 为 “属性 ”， 也 把 Property 译 为 “属性 ”。 其 实 ， 这 两 个 词 所 
表达 的 不 是 一 个 层面 上 的 东西 。 

Property 属 于 面 癌 对 象 理 论 范 胃 。 在 使 用 面 癌 对 象 思想 编程 的 时 
候 ， 第 音 需 要 对 客观 事物 进行 抽象 ， 再 把 抽象 出 来 的 结果 封 痛 成 关 ， 头 
中 用 来 表示 事物 状态 的 成 员 束 是 Property。 比 如 要 写 一 个 模拟 赛车 的 游 
戏 ， 那 么 必 不 可 少 的 就 是 对 现实 汽车 的 抽象 。 现 实 中 的 汽车 号 上 会 市 有 
很 多 数据 ， 但 在 游戏 中 可 能 只 关心 它 的 长 度 、 和 宽度 、 局 有 度 、 苗 量 、 速 友 
等 有 限 的 几 个 数据 ， 同 时 ， 还 会 把 汽车 “加 速 ”` “减速 ?等 一 些 行为 也 提 
取出 来 并 用 算法 模拟 ， 这 个 过 程 束 是 抽象 (结果 是 Car 这 个 类 ) o 
然 ，Car.Length、Car.Height、Car.Speed 等 表达 的 是 汽车 当前 处 在 一 个 什 
么 状态 ， 而 Car.Accelerate()、Car.Break() 表 达 的 是 汽车 能 做 什么 。 
此 ，Car.Length、Car.Height、Car.Speed 吏 是 Property 的 典型 代表 ， 将 
Property 详 为 “属性 ?也 很 贴切 。 总 结 一 句 话 区 是 : Property UTE) 是 针 
XD fü eS. 

Attribute 则 是 编程 语言 文法 层面 的 东西 。 比 如 有 两 个 同类 的 语法 元 
系 A 和 B， 为 了 表示 A 与 B 不 完全 相同 或 者 A 与 B 在 用 法 上 有 些 区 别 ， 这 时 
候 就 要 针对 A 和 B 加 一 些 Attribute。 也 惑 是 说 ，Attribute 只 与 语言 层面 上 
的 东西 相关 ， 与 抽象 出 来 的 对 象 没 什么 关系 。 因 为 Attribute 是 为 了 表 
示 “ 区 分 ”的 ， 所 以 把 它 译 为 “特征 ”?。C# 中 的 Attribute 就 是 这 种 应 用 的 典 
型 例子 ， 我 们 可 以 为 一 个 类 江 加 Attribute， 这 个 类 的 类 成 员 中 有 很 多 
Property» © Attribute H Æ H RKK IKEE PAHE, M Property I] 
对 应 看 抽象 对 象 映 上 的 性 状 ， 它 们 根本 不 是 一 个 层面 上 的 东西 。 

习惯 上 ， 瑞 文中 把 标签 式 语 言 中 表示 一 个 标签 特征 的 “名 称 一 值 ” 对 
称 作 Attribute。 如 果 恰 好 又 是 用 一 种 标签 语言 在 进行 面 同 对 象 编程 ， 这 
时 候 两 个 概念 束 有 可 能 混 清 在 一 起 了 。 实 际 上 ， 使 用 能 够 进行 面 同 对 象 
编程 的 标签 式 语言 只 是 把 标 丛 与 对象 做 了 一 个 映射 ， 同 时 把 标签 的 
Attribute 与 对 象 的 Property 也 做 了 一 个 映射 一 一 针对 标签 还 是 叫 
Attribute， 针 对 对 象 还 是 叫 Property， 仍 然 不 是 一 个 层面 上 的 东西 。 而 
且 ， 标 签 的 Attribute 与 对 象 的 Property 也 不 是 完全 映射 的 ， 往 往 是 一 个 标 
签 所 具有 的 Attribute 多 于 它 所 代表 的 对 象 的 Property。 

因为 XAML 是 用 来 在 UI 上 绘制 控件 的 ， 而 控件 本 时 束 是 面 同 对 象 抽 
象 的 产物 ， 所 以 XAML 标 签 的 Attribute 里 束 有 一 大 部 分 是 与 控件 对 象 的 





Property 互 相对 应 的 。 当 然 ， 这 还 意味 看 XAML 标 签 还 有 一 些 Attribute 并 
不 对 应 控件 对 象 的 Property。 

明白 了 XAMEL 的 格式 以 及 Attribute 与 Property 的 关系 ， 对 上 面 的 代码 
即 可 一 目 了 然 。 它 的 总 体 结构 是 一 个 <Window> 标 俭 内 部 包 侣 着 一 个 
<Grid> 标 丛 (或 者 说 <Grid> 标 签 是 <Window> 标 丛 的 内 容 ， 如 下 代码 段 
所 示 ) ， 代 表 的 含义 是 一 个 实体 对 象 内 舱 套 独 一 个 Grid 对 象 。 


«Window» 
«Gnd» 


«land» 


«Window» 


XAMEL 是 一 种 “声明 ”* 式 语言 ， 当 你 见 到 一 个 标签 ， 束 意味 着 声明 了 
一 个 对 月， 对 象 之 间 的 层级 关系 要 么 是 并 列 、 要 么 是 包含 ， 全 都 体现 在 
标签 有 的 关系 上 。 

下 面 这 些 代 码 束 都 是 <Window> 标 签 的 Attribute。 


x:Class-" MyFirstWpfApplication. Window | " 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title=" Window" Height-" 300" Width" 300" 


其 中 ，Title、Height 和 Width 一 看 就 知道 是 与 Window 对 象 的 Property 
相对 应 的 。 中 间 两 行 〈 即 两 个 xmlns) 是 在 声明 名 称 空 间 。 最 上 面 一 行 
是 在 使 用 名 为 Class 的 Attribute， 这 个 Attribute 来 和 目 于 x: 前 缀 所 对 应 的 名 称 
空间 。 下 和 面 仔细 解释 。 

前 面 已 经 说 过 ，XAML 语 言 是 从 XML 语言 派生 出 来 的 。XML 语言 
有 一 个 功能 束 是 可 以 在 XML 文 档 的 标 从 上 使 用 xmlns 特 征 来 定义 名 称 空 
H] (Namespace) ，xmlns 也 就 是 XML-Namespace 的 缩写 了 。 定 义 名称 
空间 的 好 处 束 是 ， 当 来 源 不 同 的 类 重 名 时 ， 可 以 使 用 名 称 空 间 加 以 区 
分 。xmlns 特 征 的 语法 格式 如 下 : 

xmins[: 可 选 风 映射 前 级 ]=" 名 种 宇 间 " 

xmlns 后 可 以 跟 一 个 可 选 的 映 冉 前 级 ， 之 则 用 冒号 分 隅 。 如 果 没 有 
写 可 选 映射 前 经， 那 束 意味 看 所 有 来 自 于 这 个 名 称 空间 的 标签 前 都 不 用 
加 前 缀 ， 这 个 疫 有 映射 前 缀 的 名 称 空 间 称 为 "默认 名 称 衬 间 ”一 -一 默认 名 
称 空间 只 能 有 一 个 ， 而 且 应 该 选择 其 中 元 系 梓 最 频 过 使 用 的 名 称 空 间 来 





充当 默认 名 称 空 间 。 上 面 的 例子 中 ，<Window> 和 <Grid> 都 来 目 由 第 二 
行 声明 的 默认 名 称 空间 。 而 第 一 行 中 的 Class 特 征 则 来 自 于 第 三 行 中 x: 前 
级 对 应 的 名 称 空 间 。 这 里 可 以 做 一 个 有 趣 的 小 实验 : 如 果 给 第 二 行 声 明 
ie «xn E-—-^- B 2x. Eiln, 3G P Ek X FE BÉ m VE 
JE8 AM : 


zn: Window x:Class-" MyFirst WpfApplication. Window" 
xmlns:n-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" Window" Height-" 300" Width" 300" 


zmürid» 


zin: ard» 


zin: Window? 


XAML 中 引用 外 来 程序 集 和 其 中 .NET 名 称 空 间 的 语法 与 C# 是 不 一 
样 的 。 在 C# 中 ， 如 果 想 使 用 System.Windows.Controls 名 称 空间 里 的 
Button 类 ， 需 要 先 把 包含 System.Windows.Controls 名 称 空 间 的 程序 集 
PresentationFramework.dll 退 过 洪 加 引用 的 方式 引用 到 项 目 中 ， 然 后 再 在 
C# 代 人 码 的 顶部 写 上 一 句 using System.Windows.Controls;。 在 XAML 中 做 
同样 的 事情 也 需要 先 洪 加 对 程序 集 的 引用 ， 然 后 再 在 根 元 系 的 起 始 标 签 
中 写 上 一 句 : xmlns:c="clr- 
namespace:System.Windows.Controls;assembly-PresentationFramework" . 
cx RR BEA. AAH se TI control) 也 可 以 。 因 为 Button 来 目 
前 绥 c 对 应 的 名 称 空间 ， 所 以 在 使 用 Button 的 时 候 就 要 写成 <c:Button>... 
</C:Button>。 

xmins:c-"clr- 
namespace:System.Windows.Controls;assembly-PresentationFramework" , 
这 么 长 的 一 串 字 符 看 上 去 的 确 有 点 您 怖 ， 但 不 用 担心 ，VS 200824 H 
动 提示 功能 的 ， 如 图 2-5 所 示 。 


lg mmm cClass"WplAppicatoni MWindow1" 
2| xminss"htip.//schemas.microsoft com/winfx/2006/xaml/presentation" 
3! xminsxs"htip.//schemas.microsoft com/winfx/2006/xaml" 


| F System Threading i in assembly System. Core 
aP System. Timers in assembly System 
| lan System. Web in assembly System 
ss System. Windows in assembly PresentationCore 
| if System Windows in assembly PresentationFramework 
as! System. Windows in assembly WindowsBase 
af! System. Windows.Annotations in assembly PresentationFramework 
aP System. Windows.Annotations.Storage in assembly PresentationFramework 
- System. E Automation.Peers in assembly PresentationCore — 
Š ows.Controls sembh Pre: sentatio nFran veworl 
jp Stem. Windows. ces Pile: in assembly PresentationFramework 
aP System. Windows.Converters in assembly WindowsBase 
aP System. Windows.Data in assembly PresentationFramework 
sf System. Windows.Documents in assembly PresentationFramework 
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图 2-5 VS 2008 的 自动 提示 功能 


在 VS 2008 目 动 提示 的 顶部 ， 你 会 看 到 几 个 看 上 去 像 网 页 地 址 的 名 
称 空间 ， 如 图 2-6 所 示 ， 其 中 承包 含 例 子 代 码 中 的 那 两 行 。 为 什么 名 称 
空间 看 上 去 像 是 一 个 主页 地 址 呢 ? 其 实 把 它 copy 到 IE 的 地 址 栏 里 尝试 跳 
转 也 不 会 打开 网 页 。 这 里 只 是 XAML 解析 器 的 一 个 硬性 编码 Chard- 
coding) ， 只 要 见 到 这 些 固 定 的 字符 串 ， 束 会 把 一 系列 必要 的 程序 集 
(Assembly) 和 程序 集中 包含 的 .NET 名 称 空 间 引 用 进来 。 


sd Tum shens deni. e ebd 

过 http://schemas.microsoft.com/winfx/2006/xaml/composite-font 
P http//schemas.microsoft.com/winfx/2006/xaml/presentation 

到 http://schemas.microsoft.com/xps/2005/06 

ak http://schemas.microsoft.com/xps/2005/06/documentstructure 
P WhpfApplicationl in assembly WpfApplication1 


af WpfApplicationl.Properties in assembly WpfApplicationl 
af Microsoft.CSharp in assembly System 

aP Microsoft.SalServer.Server in assembly System.Data 

af Microsoft. VisualBasic in assembly System 

aP Microsoft; Win32 in assembly mscorlib 

af Microsoft. Win32 in assembly PresentationFramework 

s" M Microsoft,Win32 in assembly System 








”图 2-6 VS 2008 自 动 提示 项 部 的 几 个 名 称 空间 


堆 认 引用 进来 的 两 个 名 称 空间 格外 重要 ， 它 们 所 对 应 的 程序 集 
和 .NET 名 称 空间 如 下 : 
http://schemas.microsoft.com/winfx/2006/xaml/presentation% JV : 
System.Windows 
System.Windows.Automation 
System.Windows.Controls 
System.Windows.Controls.Primitives 
System.Windows.Data 
System.Windows.Documents 
System.Windows.Forms.Integration 
System.Windows.Ink 
System.Windows.Input 
System.Windows.Media 
System.Windows.Media.Animation 
System.Windows.Media.Etffects 
System.Windows.Media.Imaging 
System.Windows.Media.Media3D 
System.Windows.Media.TextFormatting 
System.Windows.Navigation 
System.Windows.Shapes 


也 天 是 说 ， 你 在 XAML 代 码 中 可 以 直接 使 用 这 些 CLR 和 名 称 空间 中 的 
类 型 (因为 默认 XML 名 称 空 间 没 有 前 级 ) 。 

http://schemas.microsoft.com/winfx/2006/xaml 则 对 应 一 些 与 XAML 语 
法 和 编译 相关 的 CLR 名 称 空间 。 使 用 这 些 名 称 空间 中 的 类 型 时 需要 加 x 
de 本 了 名 为 x 的 XML 名 称 空 间 中 (后 面 章节 中 有 评 
HHR) 。 

从 这 两 个 名 称 空 间 的 名 字 和 它们 所 对 应 的 .NET 程 序 集 上 ， 我 们 不 难 
看 出 ， 第 一 个 名 称 空间 对 应 的 古 与 绘制 UI 相关 的 程序 集 ， 古 表示 

(Presentation) 层面 上 的 东西 ; 第 二 个 名 称 空间 则 对 应 XAML 语 言 解 析 

处 理 相 关 的 程序 集 ， 是 语言 层面 上 的 东西 。 

还 剩 下 x:Class="MVyEirstWpfApplication.Window1" 这 个 Attribute。xX: 
前 级 说 明 这 个 Attribute 来 目 于 x 映射 的 名 称 空间 前 面 我 刚刚 分 析 过 ， 
这 个 名 称 空间 是 对 应 XAML 解 析 功 能 的 。x:Class， 顾 名 思 义 它 与 类 有 些 
关系 ， 是 何 种 关系 呢 ? 让 我 们 做 个 有 趣 的 实验 : 

首先 ， 把 x:Class="MVyEirstWpfApplication.Window1" 这 个 Attribute 删 
挥 ， 骨 人 到 Window1.xaml.cs 文 件 里 ， 把 构造 器 中 对 InitializeComponent 方 
法 的 调用 也 删 挥 。 编 译 程 序 ， 你 会 发 现 程 序 仍然 可 以 运行 。 为 什么 呢 ? 
打开 App.xaml 这 个 文件 ， 你 能 发 现 这 样 一 个 Attribute 
StartupUri="Window1.xaml"， 它 古 在 告诉 编 详 瘟 把 由 Window1.xaml 解 析 
后 生成 的 究 体 作为 程序 局 动 时 的 主 窗 体 。 也 就 是 说 ， 只 要 Window1.xaml 
文件 能 够 钻 正 确 解 析 成 一 个 窗 体 ， 程 序 束 可 以 正常 运行 。 

然后 ， 只 恢复 x:Class 这 个 Attribute (不 恢复 对 InitializeComponent 方 
法 的 调用 ) ， 并 更 改 它 的 值 为 
x:Class="MyFirstWpfApplication.WindowABC"。 编 译 之 后 ， 仍 然 可 以 正 
MZT. XAF, MHIL Disassembler 〈 中 间 语 言 反 编译 器 ， 如 网 2-7 所 
示 ) 打开 项 目的 编 详 结 未， 你 会 友 现 在 由 项 目 编 详 生成 的 程序 集 里 包 合 
一 个 名 为 WindowABC 的 类 ， 如 图 2-8 所 示 。 

L. Microsoft Windows SDK v6.0A 
d) Tools 


s '| Fusion Log Viewer 








PIT 

i Install Microsoft FXCop 

jas Manifest Generation and Editing 
图 2-7 P Eha =: c es IL EL 





| F CAUserA Administrator Documents... 


BO CisersiAdministratoriDocumentslVisual Studio 20084P 
b MANIFEST 
J'""pFAp pi ication i x 
5p g WpFApplication1 .Properties 
z NE WpfApplication1 . App 












































图 2-8 ”项 目 编译 后 生成 的 WindowABC 类 


这 说 明 ，x:Class 这 个 Attribute 的 作用 是 当 XAML 解 析 需 将 包 侣 它 的 
标签 解析 成 C# 类 后 ， 这 个 类 的 类 名 是 什么 。 这 里 ， 己 经 触及 到 的 XAML 
的 本 质 。 前 面 我 们 已 经 看 到 ， 示 例 代码 的 结构 束 是 使 用 XAML 语 言 朋 观 
地 告诉 我 们 ， 当 前 被 设计 的 窗 体 是 在 一 个 <Window> 里 散人 套 一 个 
<Grid>。 如 果 是 使 用 C# 来 完成 同样 的 设计 呢 ? 显 然 ， 我 们 不 可 能 去 更 改 
Window 这 个 类 ， 我 们 能 做 的 是 从 Window 类 派生 出 一 个 类 (比如 岂 
WindowABC) ， 再 为 这 个 类 添加 一 个 Grid 类 型 的 字段 ， 然 后 把 这 个 字 
段 在 初始 化 的 时 候 赋 值 给 派生 类 的 内 容 属性 。 代 码 看 起 来 大 概 是 这 样 : 


using System. Windows; 


using System. Windows.Controls; 


class WindowABC : Window 


| 
| 


private Grid grid; 


public WindowABCY) 


Í 
l 


grid = new Grid(); 
this.Content = grid; 


1 
| 


最 后 ， 让 我 们 回 到 最 初 的 代码 。 你 可 能 会 问 : 在 XAML 里 有 
x:Class="MyFirstWpfApplication. Window1"， 在 Window1.xaml.cs 里 也 声 
明了 Window1 这 个 类 ， 难 道 它 们 不 会 冲突 吗 ? 仔细 看 看 
Window1.xaml.cs 中 Window1 类 有 的 声明 就 知道 了 一 一 在 丽 明 时 使 用 了 
partial 这 个 关键 字 。 使 用 partial 关 键 字 ， 可 以 把 一 个 类 分 拆 在 多 处 定义 ， 
只 要 各 部 分 代码 不 冲突 即 可 。 显 然 ， 由 XAML 解 析 问 生成 的 Window1 类 
在 声明 时 也 使 用 了 partial 关 键 字 ， 这 样 ， 由 XAML 人 解析 成 的 类 和 C# 文 件 
里 定义 的 部 分 束 合 二 为 一 。 正 是 由 于 这 种 partial 机 制 ， 我 们 可 以 把 类 的 
逻辑 代码 留 在 .cs 文件 里 ， 用 C# 语 言 来 实现 ， 而 把 那些 与 声明 及 布局 UI 
元 素 相 关 的 代码 分 离 出 去 ， 实 现 UI 与 逻辑 分 离 。 并 有 日 ， 用 于 绘制 UI 的 代 
伺 〈《 如 声明 控件 类 型 的 字段 、 设 置 它 们 的 外 观 和 布局 等 ) 也 不 必 再 使 用 
C# 语 言 ， 使 用 XAML 和 XAML 编 辑 工具 就 能 轻松 搞定 ! 

至 此 ， 你 应 该 对 这 个 最 人 简 早 的 XAML 程 序 了 然 于 胸 了 。 


3 
系统 学 习 XAMILL 语法 


有 了 前 面 那个 例子 开 狂 破 士 ， 我 们 对 XAML 已 经 不 再 陌生 。 下 面 ， 
我 们 将 系统 地 学 习 XAMEL 的 语法 和 编程 知识 。 为 了 让 大 家 更 透彻 地 理解 
我 尽 可 能 地 在 每 个 XAML 实 例 后 跟 上 一 个 用 C# 实 现 同 样 功 能 的 
实例 。 

回顾 前 面 的 例子 ， 我 们 已 经 知道 XAMEL 是 一 种 专门 用 于 绘制 UI 的 语 
言 ， 人 借助 它 可 以 把 UI 定 义 与 运行 锡 辑 分 离开 来 。XAML 使 用 标签 来 宪 义 
UI 元 素 (UI Element) ， 每 个 标签 对 应 .NET Framework 类 库 中 的 一 个 控 
件 类 。 通 过 设置 标签 的 Attribute， 不 但 可 以 对 标签 所 对 应 控件 对 象 的 
Property 进 行 赋值 ， 还 可 以 做 一 些 和 额外 的 事件 (如 再 明 名 称 空间 、 指 定 
类 名 等 ) 。 在 这 个 大 框架 下 ， 我 们 来 详细 地 了 人 解 XAML 的 一 些 细节 。 


31 XAML 文 档 的 树 形 结构 


UI 在 用 户 眼 里 是 个 平面 结构 。 以 如 图 3-1 所 示 图 为 例 ， 在 用 户 看 
来 ， 这 个 界面 融 是 一 个 窗 体 上 平 铺 大 四 个 文本 和 框 和 一 个 按钮 的 界面 。 


B' Window 











图 3-1 用 户 眼 里 的 UI 布 局 


在 传统 的 Visual C++, Delphi, Visual Basic 6 和 Windows Form 程 序 
员 的 思维 里 ，UI 也 是 一 个 平面 的 结构 。 因 此 ， 程 序 员 要 做 的 事情 惑 是 按 


照 设 计 师 给 定 的 UI 布局 把 控件 安置 在 窗 体 表面 ， 并 用 使 用 长 上 度 、 宽 度 和 和 
间距 把 控件 对 齐 。 

与 传统 设计 思维 不 同 ，XAML 使 用 树 形 迎 辑 结构 来 摘 述 UI。 下 面 是 
用 来 描述 上 图 UI 布 局 的 XAMEL 人 代码。 


«Window x:Class-" WpfApplication 1. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlins:x-" http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Window" Height" 173" Width="296"> 
<StackPanel Background" LightBlue > 
«TextBox x:Name-"textBox1" Margin="5"/> 
«TextBox x:Name- "textBox2" Margin-"5"/7 
«StackPanel Orientation=" Horizontal 
«TextBox x:Name-"textBox3" Width-" 140" Margin="5"/> 
«TextBox x:Name-"textBox4" Width-" 120" Margin="5"/> 
«IStackPanel^ 
«Button x: Name-" button]" Margin- 57 
«[mage Source-"pO009.png" Width-"23" Height-"23"/2 
</Button> 
</StackPanel> 


</Window> 


因为 代码 中 市 有 很 多 对 Attribute 的 赋值 ， 所 以 结构 看 起 来 并 不 是 那 
么 清晰 。 如 果 我 们 把 对 Attribute 的 赋值 都 去 挥 ， 那 么 上 和 面 这 段 代 人 码 束 显 
露出 了 它 的 树 形 框架 结构 。 


<Window> 
<StackPanel> 
<TextBox /> 
<TextBox /> 
<StackPanel> 
<TextBox /> 
<TextBox > 
«[StackPanel^ 
«Button- 
«|mage/^ 
</Button> 
</StackPanel> 


«Window 
如 果 用 一 张 图 表示 上 和 耐 的 树 形 结 构 ， 它 会 是 如 图 3-2 所 示 的 样子 。 


StackPanel 





TextBox TextBox StackPanel Button 


图 3-2 XAML 使 用 树 形 逻 辑 结 构 描 述 UI 

有 意思 的 是 ， 针 对 同一 个 “看 上 去 一 样 * 的 UI 布局 ，XAML 代 码 不 一 
eA a 拿 上 面 的 UI 布 局 来 说 ， 我 们 还 可 以 使 用 不 同 的 XAMEL 代 码 
来 描述 它 。 


«Window x:Class-"WpfApplicationTree. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x- http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" Window" Height-" 175" Width="300"> 
«Grid Background-" LightSlateGray > 
«Grid. ColumnDefinitions? 
«ColumnDefinition Width-"7*"/5 
«ColumnDefinition Width-"3*"/5 
«/Gnd.ColumnDefinitions? 
«Grid. RowDefinitions? 
<RowDefinition Height="33"/> 
<RowDefinition Height="33"/> 
<RowDefinition Height="33"/> 
<RowDefinition Height="40"/> 
</Grid.RowDefinitions> 
<TextBox x:Name="textBox1" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="5"/> 
<TextBox x:Name="textBox2" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="5"/> 
<TextBox x:Name="textBox3" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="1" Margin="5"/> 
<TextBox x:Name="textBox4" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="1" Margin="5"/> 
«Button x:Name="button1" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Margin="5"> 
<|mape Source-"p0009.png" Width="23" Height="23"/> 
</Button> 
</Grid> 
</Window> 


精 减 后 的 代码 是 : 


<Window> 

«nd» 
«TextBox /> 
«TextBox /> 
«TextBox > 
«TextBox /> 
«Button 

<Image /> 

«[Button? 

«ind» 


«Window» 


框架 则 变 成 了 如 图 3-3 所 示 的 样子 。 


图 3-3 ”同样 的 UI 可 能 对 应 不 同 的 XAML 实 现 


尽管 两 段 代码 对 UI 的 实现 方法 不 同 《〈《 实 际 上 还 有 很 多 方法 ) ， 但 框 
染 部 是 树 状 的 ， 以 <Window> 对 和 象 为 根 结 点 ， 一 层 一 层 同 下 包含 。 这 种 
树 形 结构 对 于 WPF 整 个 体系 都 具有 非常 午 要 的 意义 ， 它 不 但 影 啊 看 UI 的 
布局 设计 ， 还 深刻 地 影响 看 WPF 的 属性 (Property)〉 子 系统 和 事件 
(Event) 子 系统 守 方 方面 而 。 在 实践 编程 中 ， 我 们 经 营 要 在 这 标 树 上 
进行 授 名 称 查 找 元 系 、 获 取 父 / 子 结 点 等 操作 ， 为 了 方便 操作 这 标 树 ， 
WPEF 基 本 类 库 里 为 程序 员 准 备 了 VisualTreeHelper 和 LogicalTreeHelper 两 
个 助手 类 (Helper Class) ， 同 时 还 在 一 些 重 要 的 基 类 里 封 荫 了 一 些 专门 
用 于 操作 这 标 树 的 方法 。 

你 可 能 会 问 : 既然 有 这 么 多 种 方法 来 实现 同一 个 UI， 那 到 辰 应 访 选 
择 哪 种 方法 来 实现 UI 呢 ? 实际 上 ， 设 计 师 给 出 的 UI 布局 是 软件 的 一 个 并 





SRE (Static Snap) ， 这 个 静态 快照 加 上 用 户 有 可 能 的 动态 操作 才能 
构成 选择 布局 实现 方式 的 完整 依据 。 拿 上 面 两 段 代码 举例 ， 如 果 你 期 望 
用 户 在 改变 窗 体 尺寸 后 控件 能 够 成 比例 缩放 上 自己 的 尺寸 ， ce ee 
Tr d WMR R BHEB PRESA] Eft hi HE, S8 EXTR 


3.2 XAML 中 为 对 象 属性 赋值 的 语法 


XAML 是 一 种 声明 性 语言 ，XAML 编译 器 会 为 每 个 标签 创建 一 个 与 
之 对 应 的 对 象 。 对 象 创建 出 来 之 后 要 对 它 的 属性 进行 必要 的 初始 化 之 后 
才 有 使 用 意义 。 因 为 XAML 语言 不 能 编写 程序 的 运行 多 和 辑 ， 所 以 一 份 
XAML 文 档 中 除了 使 用 标签 声明 对 象 就 是 初始 化 对 象 的 属性 了 。 
huasi uapa aaa 


e 使 用 字符 串 进行 简单 赋值 
e 使 用 属性 元 素 (Property Element) 进行 复杂 赋值 。 


我 们 以 一 个 <Rectangle> 标 和 俭 的 F 记 为 例 来 介绍 这 两 种 方法 。 
3.2.1 使 用 标签 的 Attribute 为 对 象 属性 赋值 


前 面 我 们 已 经 知道 ， 一 个 标签 的 Attribute 里 有 一 部 分 与 对 象 的 
Property 互 相对 应 ，<Rectangle> 标 签 的 Fil 这 个 Attribute 束 是 这 样 一 一 它 
与 Rectangle 类 对 和 象 的 Fill 属 性 对 应 。 在 MSDN 文 档 库 里 可 以 查 到 ， 
Rectangle.Fill 的 类 型 是 Brush。Brush 是 一 个 抽象 类 ， 几 是 以 Brush 为 其 类 
的 类 都 可 作为 Fill 属 性 的 值 。Brush 的 派生 类 有 很 多 

e SolidColorBrush: 单 色 男 刷 。 

LinearGradientBrush: 线性 渐变 画 刷 。 
RadialGradientBrush: 径 向 渐变 画 刷 。 
ImageBrush: ^47 | mi ipl]. 
DrawingBrush: RŒ B) mH l. 
VisualBrush: PJ +J JÚ Z& Hj] 。 

Ti 这 个 例子 中 只 使 用 SolidColorBrush 和 LinearGradientBrush 两 
种 。 

我 们 先 学 习 使 用 字符 串 对 Attribute 进 行 简 单 赋值 。 假 设 我 们 的 
Rectangle 只 需要 填充 成 单一 的 赣 色 ， 那 么 只 需要 从 单 地 写成 : 





«Window x:Class-"WpfApplicationTree. Window |" 
ximlns-" http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" Window" Height-" 188" Width-"300"* 
«Grid VerticalAlignment-" Center" HorizontalAlignment-" Center"? 
«Rectangle x: Name-"rectangle" Width-"200" Height-" 120" Fill-"Blue"/ 
</Grid> 


«Window? 


运行 的 效 末 如 图 3-4 所 示 。 





E Window 





图 3-4 ”用 字符 串 对 Attribute 简 单 赋值 的 效果 图 


我 们 看 到 ，Blue 这 个 字符 串 最 终 航 翻译 成 了 一 个 SolidColorBrush 对 
象 并 赋值 给 了 rectangle 对 象 。 换 成 C# 代 码 是 这 样 : 
lins 
SolidColorBrush sBrush = new SolidColorBrush(); 
sBrush.Color = Colors.Blue; 
this.reetangle.Fill = sBrush; 
M 


需要 注意 的 是 ， 通 过 这 种 Attribute=Value 语 法 赋值 时 ， 由 于 XAML 
的 语法 限制 ，Value 只 可 能 是 一 个 字 从 串 值 。 这 束 引 出 了 两 个 问题 : 

e 如果 一 个 类 能 使 用 XAML 语 言 进行 声明 ， 并 人 允许 它 的 Property 与 
XAML 标 签 的 Attribute 互 相映 册 ， 那 束 需 要 为 这 些 Property 准 备 适 当 的 转 


换 机 制 。 

e 由 于 Value 是 个 字符 串 ， 所 以 其 格式 复杂 程度 有 限 ， 尽管 可 以 在 
转换 机 制 里 包含 一 定 的 按 格 式 解 析 和 字符 串 的 功 能 以 便 转换 成 较 复 杂 的 目 
标 对 象 ， 但 这 会 让 最 终 的 XAML 使 用 者 头疼 不 已 。 因 为 他 们 不 得 不 在 没 
— 的 情况 下 手 与 一 个 格 陈 复杂 的 字符 串 以 满足 赋值 要 求 。 

一 个 问题 的 解决 方 采 是 使 用 TypeConverter 类 有 的 派生 类 ， 在 派生 类 
HR Mrd FYE, BA p ITI e CR J NS, As Ik: H3 J PE 
JCA (Property Element) . 


3.2.2. [EH] IA onverter Ñ f XAML fi 25 HJ Attribute - XJ 2: 
I'JPropertyzt£7 Bj 


注意 
本 小 蔬 的 例子 对 于 初学 者 来 说 理解 起 来 比较 困难 而 且 实 用 性 不 大 ， 主 要 是 为 辟 欢 刨 根 问 
撒 的 WPF 程 序 员 准 备 的 ， 初 学 者 可 以 跳 过 这 一 小 市 。 


自 完 ， 我 们 准备 了 一 个 类 : 


public class Human 

| 
public string Name | get; set; | 
public Human Child | get; set; } 


| 

e string 类型 的 Name。 

e Human 类 型 的 Child。 
现在 我 的 期 组 是 ， 如 果 在 XAML 里 这 样 写 


<Window.Resources> 
<local: Human x:Key-" human" Child=" ABC 
</Wmdow. Resources> 


则 能 够 为 Human 实 例 的 Child 属 性 赋 一 个 Human 类 型 的 值 ， 并 日 
Child.Name 束 是 这 个 字符 串 的 值 。 

我 们 先 看 看 直接 写 行 不 行 。 在 UI 上 洪 加 一 个 按钮 button1， 并 在 它 的 
Click fr A3 za H E: 


private void button] Click(object sender, RoutedEventArgs e) 


| 
| 


Human h = (Human)this.FindResource( "human" ); 
MessageBox.Show(h.Child. Name); 


编 诺 没有 问题 ， 但 在 单 击 按钮 之 后 程序 抛 出 异 第 ， 告 诉 Child 不 存 
在 ， 为 什么 Child 不 存在 呢 ? 原因 很 窗 单 ，Human 的 Child 属 性 是 Human 
类 型 ， 而 XAML 代 但 中 的 ABC 是 个 字符 串 ， 编 诺 硕 不 知道 如 何 把 一 个 字 
符 串 实例 转换 成 一 个 Human 实 例 。 那 我 们 应 广 怎 么 做 呢 ? 办 法 是 使 用 
TypeConverter 和 TypeConverterAttribute 这 两 个 类 。 

首先， 我 们 要 从 TypeConverter 类 派生 出 目 己 的 类 ， 并 和 曹 写 它 的 一 个 
ConvertFrom 方 法 。 这 个 方法 有 一 个 参数 名 为 value， 这 个 值 束 是 在 
XAML 文 档 里 为 它 设置 的 值 我 们 要 做 的 就 是 把 这 个 值 “ 翻 详 ” 成 合适 类 型 
的 值 赋 给 对 象 的 属性 : 


public class String ToHumanTypeConverter : TypeConverter 


| 
| 


public override object ConvertFrom(ITypeDescnptorContext context, System.Globalization.Culturelnfo culture, object value) 


| 
if (value is string) 
; 
| 


Human h = new Human(); 


h.Name = value as string; 
return h: 


1 
| 


return base.ConvertFrom(context, culture, value): 


[ 
i 


| 
J 


有 了 这 个 类 还 不 够 ， 还 要 使 用 TypeConverterAttribute 这 个 特征 类 把 
StringToHumanTypeConverter 这 个 次“ 粘贴 > 到 作为 目标 的 Human 类 上 。 


[TypeConverterAttribute(typeof(String FoHumanTypeConverter))| 
public class Human 


| 


public string Name í get; set; } 
public Human Child { get; set; | 


1 
| 


因为 特征 类 在 使 用 的 时 候 可 以 省 略 Attribute 这 个 词 ， 所 以 也 可 以 写 


[TypeConverter(typeotlString ToHumanTypeConverter))] 
public class Human 
| 
public string Name | get; set; | 
publie Human Child { get; set; | 
| 
但 这 样 号 ， 我 们 需要 认 清 与 在 方 括 亏 里 的 是 TypeConverterAttribute 而 不 
是 TypeConverter。 
完成 之 后 ， 再 次 单 击 按钮 ， 我 们 想 要 的 结 采 束 出 来 了 ! 如 图 3-5 所 
小。 


E| Windowl 








注意 

需要 注意 的 是 ，TypeConverter 类 的 使 用 远 远 不 是 只 重 载 一 个 ConvertFrom 方 法 那么 简单 。 
` Q ¿L s 还 需要 重 载 其 他 几 个 方法 。 详 细 的 使 用 方法 请 参阅 TypeConverter 的 
AS E XC e 


3.2.3 BENTA 


TFXAMLH, JET E 均 具 有 目 己 的 内 容 (Content) 。 标 签 的 内 容 
指 的 束 是 夹 在 起 始 标 签 和 结束 标签 之 同 的 一 些 子 级 标签， 每 个 子 级 标签 
都 是 父 级 标签 AE RAE (Element) ， 人 简称 为 父 级 标签 的 一 个 元 
素 。 顾 名 思 义 ， 属 性 元 素 指 的 是 某 个 标签 的 一 个 元 素 对 应 这 个 标签 的 一 
个 属性 ， 即 以 元 素 的 形式 来 表达 一 个 实例 的 属性 。 代 码 描 述 为 : 


<ClassName> 
<ClassName.PropertyName> 
<|-- 以 对 象形 式 为 属性 赋值 --> 
</ClassName,PropertyName> 
</ClassName> 


XIE, EXNER V SC EHR R AART 8] ET] 
ITR) 进行 赋值 了。 


如 果 把 上 面 的 例子 用 属性 标签 式 语法 改写 一 下 ，XAML 代码 将 是 这 


«Grid VerticalAlignment-"Center" HorizontalAlignment-" Center" 
Rectangle x: Name-" rectangle" Width= 200 Height-" 120" 
«Rectangle.Fill- 
«SolidColorBrush Color=" Blue /> 
</Rectangle.Fill> 
</Rectangle> 
sand» 


效果 与 先前 代码 列 无 二 至。 所 以 ， 对 于 简单 赋值 而 言 属性 元 系 语 法 
并 没有 什么 优势 ， 反 而 让 代码 看 起 来 有 所 见长 。 但 过 到 属性 是 复杂 对 象 
时 这 种 语法 的 优势 吏 体 现 出 来 了 了， 如 使 用 线性 渐变 国 刷 来 填充 这 个 趋 
形 。 


«Grid VerticalAlignment-"Center" HorizontalAlignment-"Center"» 
«Rectangle x:Name-" rectangle" Width-"200" Height-" 120" 
«Rectangle.Fill 
« LinearGradientBrush 
« LinearGradientBrush.StartPoint^ 
«Point X="0" Y="0"/> 
</Linear(iradientBrush.StartPoint> 
<LinearGradientBrush.EndPoint> 
«Point X="1" Y2"]"/2 
«/[LinearGradientBrush.EndPoint^ 
« LinearGradientBrush.GradientStops 
«GradientStopCollection? 
«GradientStop Offset-"0.2" Color-"LightBlue"/ 
«GradientStop Offset-"0.7" Color-"Blue"/» 
«GradientStop Offset-" 1.0" Color-"DarkBlue"/» 
«/GradientStopCollection? 
«/[LinearGradientBrush.GradientStops? 
«JLinearGradientBrush? 
«Rectangle Fill» 
</Rectangle> 
</Grid> 


效果 如 图 3-6 所 示 。 


B' Window 








图 3-6 HH AR TEW ZE m IR TS yE J 


LinearGradientBrush 的 GradientStops 属 性 是 一 个 GradientStop 对 象 的 
集合 (GradientStopCollection〉， 即 一 系列 的 矢量 渐变 填充 点 。 在 这 些 
填充 点 之 间 ， 系 统 会 自动 进行 插值 运算 、 计 算出 过 滤 色 彩 。 填 序 天 量 的 
方 同 是 StartPoint 和 EndPoint 两 个 属性 (类 型 为 Point〉 的 连 线 方 回 ， 窍 形 
的 于 上 角 为 0.0、 右 下 角 为 11。 这 段 代 但 中 ， 针 对 这 三 个 属性 都 使 用 了 
属性 标签 式 赋值 方法 。 

古语 道 :“ 过 犹 不 及 ”。 上 面 的 代码 为 了 突出 属性 元 素 语法 我 将 所 有 
属性 都 展开 成 属性 元 系 ， 结 果 是 代码 的 可 读 性 一 落 干 克 。 经 过 优化 ， 代 
但 变 成 这 样 〈 少 了 三 分 之 一 ) : 

«Grid VerticalAlignment-" Center" HorizontalAlignment-" Center 
«Rectangle x:Name-" rectangle" Width-" 200" Height-" 120" 
«Rectangle.Fill- 
«LinearGradientBrush 
« LinearGradientBrush.GradientStops 
«GradientStop Offset" 0.2" Color-"LightBlue"/» 
«GradientStop Offset-" 0.7" Color-"Blue"/ 
«GradientStop Offset-" 1.0" Color-" DarkBlue" > 
«fLinearGradientBrush.GradientStops? 
«/LinearGradientBrush 
«[Rectangle.Fill^ 
«[Rectangle? 
«Grid» 
注意 

这 里 有 几 个 简化 XAML 的 技巧 : 

e 能 使 用 Attribute=Value 形 式 赋值 的 就 不 使 用 属性 元 素 。 

e 充分 利用 默认 值 ， 去 除 匈 余 : StartPoint="0,0" EndPoint="1,1" 是 默认 值 ， 可 以 省 略 。 

e 充分 利用 XAML 的 简写 方式 : XAML 的 简写 方式 有 很 多 ， 需 要 在 实际 工作 中 慢 慢 积 
累 。 本 书 也 会 在 用 到 的 地 方 逐 一 提 及 。 比 如 本 例 ，LinearGradientBrush.GradientStops 的 数据 类 型 
是 GradientStopCollection， 如 果 严 格 按照 语法 来 写 ， 这 个 属性 元 素 的 内 容 应 该 是 一 个 


<GradientStopCollection> 标 签 ， 实 际 上 ，XAML 人 允许 你 省 略 这 个 标签 而 把 集合 元 素 直 接 写 在 属性 
TAWAKE. FRA RETE BA KAH S o 


最 后 ， 用 一 个 小 例子 《稍微 动 用 一 点 我 们 的 美学 知识 ) 来 结束 这 一 





W: 


«Gnd VerticalAlignment-"Center" Horizontal Alipnment="Center"> 
<Ellipse Width-" 120" Height="120"> 
«Ellipse.Fill- 
«RadialGradientBrush GradientOrigin-"0.25,0.25" RadiusX-" 0.75" RadiusY= 0.73" 

«RadialGradientBrush.GradientStops? 
«GradientStop Color-" White" Offset-"0"/» 
«GradientStop Color-" Black" Offset-"0.65"/ 
«GradientStop Color-" Gray" Offset-"0.8"/» 

«/RadialGradientBrush.GradientStops 


</RadialGradientBrush> 
</Ellipse.Fill> 
</Ellipse> 
</Grid> 
这 是 一 个 径 同 渐变 男 刷 的 例子 ， 效 果 如 图 3-6 所 示 。 
| 83 Window c.i) x 





Hd3-6 (TRIP AE m Rp ACA: d 


干 万 不 要 以 为 我 是 在 VS 2008 里 一 行 一 行 写 出 的 XAML 一 一 这 上 段 代 
码 的 大 部 分 内 容 是 我 使 用 Blend 通 过 绘图 的 形式 自动 生成 的 。 由 Blend 生 
成 的 代码 里 会 包含 一 些 见 余 的 细节 。 常 见 的 见 余 细节 包括 : 

e 值 过 于 精确 : 比如 0.7910310830 这 样 的 值 ， 一 般 可 以 简化 成 0.8 
以 提高 可 读 性 。 

e 默认 值 被 显 式 地 写 出 : 比如 为 StackPanel 显 式 地 写 出 


Orientation="Vertical"， 一 般 删 挥 即 可 。 

e 专门 用 于 Blend 绘 多 的 标记 : 比如 用 于 锁定 图 形 的 标记 ， 建 议程 
序 员 与 设计 师 协 商 保留 还 是 删除 。 

一 般 情 况 下 ， 对 于 复杂 的 绘图 和 动 男 创 作 ， 应 该 先 在 Blend 里 进行 
操作 ， 然 后 回 到 VS 2008 里 进行 精确 的 微调， 在 保证 不 影 啊 效果 的 情况 
下 尺 可 能 地 提 融 代码 的 可 读 性 和 可 维护 性 。 


3.2.4 ”标记 扩展 (Markup Extensions) 


仔细 观察 XAML 中 为 对 象 属性 赋值 的 语法 ， 你 会 发 现 大 多 数 赋值 都 
是 为 属性 生成 一 个 狐 对 象 。 但 有 时 候 需 要 把 同一 个 对 象 赋值 给 两 个 对 象 
的 属性 ， 还 有 的 时 候 需 要 给 对 象 的 属性 赋 一 个 nul 什 ，WPF 甚 全 允许 将 
一 个 对 象 的 属性 人 依赖 在 其 他 对 象 的 茶 个 属性 上 。 当 需要 为 对 象 的 属性 
进行 这 些 特 殊 类 型 赋值 时 束 需 要 使 用 标记 扩展 了 。 
| 所 谓 标 记 扩 展 ， 实 际 上 是 一 种 特殊 的 Attribute=Value 语 法 ， 其 特殊 的 地 方 在 于 Value 字符 


^ 一 对 花 括 号 及 其 括 起 来 的 内 容 组 成 ，XAML 编 译 器 会 对 这 样 的 内 容 做 出 解析 、 生 成 相应 
Jos] ZR o 


因为 本 章 内 容重 在 讲述 XAML 的 语法 ， 所 以 不 必 过 分 退 冤 下 面 这 段 
代 但 的 编程 细节 ， 只 需要 关注 标记 扩展 的 语法 即 可 。 在 下 面 的 代码 中 ， 
将 使 用 Binding 类 的 实例 将 TextBox 的 Text 属 性 依赖 在 Slider 的 Value 上， 
这 样 ， 当 Slider 的 滑 块 滑动 时 TextBox 就 会 显示 Slider 当 前 的 值 。 


«Window x:Class="WpfApplicationl.Windowl" 
xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Windowl" Height-"] 10" Width-"240"7 

sStackPanel Background" LightSlateGray > 
«TextBox Text-" [Binding ElementName-sliderl, Path- Value, Mode-OneWay" Margin-"5"/» 
«Slider x:Name-"sliderl" Margin="5"/> 

«JStackPanel^ 


«Window? 
HF, Text-"(Binding ElementNamecslider1, Path- Value, 
Mode-OneWay 1X fy be biu JE S o S127 9r — PIX TINI: 
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对 象 。 

e 对 象 的 数据 类 型 名 是 紧邻 左 花 括号 的 字符 串 。 

e 对 象 的 属性 由 一 串 以 逗号 连接 的 子 字 符 串 负责 初始 化 (注意 ， 
属性 值 不 再 加 引号 )。 

初学 者 和 常 认 为 这 个 语法 比较 难 记 ， 其 实 这 个 语法 与 C# 3.0 中 的 对 象 
初始 化 语法 非常 相近 。 如 果 使 用 C# 3.0 的 语法 来 创建 一 个 Binding 类 的 实 
例 ， 最 佳 的 语法 应 该 是 : 


Binding binding = new Binding() | Source = sliderl, Mode = BindingMode.One Way }; 


CH IOPI Zn oss tB ze X Fe, EHI deba o GEI 72H BB S 
分 隅 的 了 于 字符 串 ， 这 些 子 字符 串 用 来 初始 化 对 象 的 属性 。 只 是 XAML 的 
标 健 扩展 把 对 象 的 数据 类 型 也 搬 a 到 括 写 里 面 来 了 。 

标记 扩展 办 是 对 属性 的 赋值， 所 以 完全 可 以 使 用 属性 标签 的 形式 来 
丛 换 标记 扩展 ， 只 十 简洁 性 使 然 没 人 那么 做 既 了。 下 面 是 使 用 属性 标签 
B NGA IJI: 


«Window x:Class-" WpfApplication]. Window" 
xmlns-"http://schemas.microsoft.com/winbu2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Windowl" Height-" 10" Width="240"> 
«StackPanel Background" LightSlateGray" 

TextBox Margin-" 5" 
zTextBox.Text^ 

«Binding ElementName-"sliderl" Path= Value" Mode= OneWay"/^ 

«/TextBox. Text» 

</TextBox> 

«Slider x: Name-"sliderl" Margin="5"/> 

</SlackPanel> 
</Window> 


XX RES IJ Som ie TUR EA puede. fBIUS—T UAR: VS 
2008 没 有 对 标记 扩展 提供 智能 语法 提示 ，VS 2010 已 经 很 好 地 文 持 了 对 
标记 扩展 进行 乔 能 语法 提示 ， 而 使 用 属性 标签 却 可 以 充分 利用 VS 2008 
ME REPER. 

尽管 标记 扩展 的 语法 简洁 方便 ， 但 并 不 是 所 有 对 象 都 能 用 标记 扩展 
的 语法 来 书写 ， 只 有 MarkupExtension 类 的 派生 类 (直接 或 间接 均 可 ) 才 
DR 展 语法 来 创建 对 象 。MarkupExtension 的 直接 派生 类 并 不 

s "E 


System.Windows.ColorConvertedBitmapExtension 
System.Windows.Data.BindingBase 
System.Windows.Data.RelativeSource 
System.Windows.DynamicResourceExtension 
System.Windows.Markup.ArrayExtension 
System.Windows.Markup.NullExtension 
System.Windows.Markup.StaticExtension 
System.Windows.Markup.TypeExtension 
System.Windows.ResourceKey 

System. Windows.StaticResourceExtension 
System.Windows.TemplateBindingExtension 
System.Windows.ThemeDictionaryExtension 


后 面 的 章节 将 对 这 些 标记 扩展 类 进行 详细 说 明 。 


注意 

最 后 ， 使 用 标记 扩展 时 还 需要 注意 以 下 几 点 : 

e 标记 扩展 是 可 以 稀 套 的 ， 例 如 Text="{Binding Source={StaticResource myDataSource], 
Path=PersonName}" 是 正确 的 语法 。 

e 标记 扩展 具有 一 些 简 写 语法 ， 例 如 "{Binding Value,...}" 与 "{Binding Path=Value,...}" 是 
等 价 的 、"{StaticResource myString,...}" 与 "{StaticResource ResourceKey=myString,...}" 是 等 价 
的 。 两 种 写法 中 ， 前 者 称 为 固定 位 置 参数 (Positional Parameter) ， 后 者 称 为 具名 参数 (Named 
Parameters) 。 国定 位 置 参 数 实际 上 就 是 标记 扩展 类 构造 占有 的 参数 ， 其 位 置 由 构造 右 参 数列 表决 


e 标记 扩展 类 的 类 名 均 以 蛙 词 Extension 为 后 级 ， 在 XAML 使 用 它们 的 时 候 Extension 后 级 
可 以 省 上 略 不 写 ， 比 如 写 Text="{x:Static...}" 与 写 Text="{x:StaticExtension...}" 是 等 价 的。 























3.3 ”事件 处 理 器 与 代码 后 置 


我 们 已 经 知道 ， 当 一 个 XAML 标 签 对 应 着 一 个 对 象 时 ， 这 个 标签 的 
一 部 分 Attribute 会 对 应 这 个 对 象 的 Property。 除 了 这 部 分 对 应 看 对 象 
Property 的 Attribute 外 ， 还 有 一 部 分 Attribute 对 应 看 对 象 的 事件 

(Event) 。<Button> 标 签 有 一 个 名 为 Click 的 Attribute， 它 对 应 的 残 是 
Button 类 的 Click 事 件 。 

在 .NET 事 件 处 理 机 制 中 ， 可 以 为 对 象 的 某 个 事件 指定 一 个 能 与 该 事 
件 匹 配 的 成 员 函 数 ， 当 这 个 事件 友 生 时 ，.NET 运 行 时 会 去 调用 这 个 也 
数 ， 即 表示 对 这 个 事件 的 响应 和 人 处理。 因此 ， 我 们 把 这 个 函数 称 为 “ 事 
件 处 理 器 ”(Event Handler) 。WPF 支 持 在 XAML 里 为 对 象 的 事件 指定 
事件 处 理 器 ， 方 法 是 使 用 事件 处 理 器 的 函数 名 为 对 应 对 象 事 件 的 
Attribute 进 行 赋值 : 


«ClassName EventName="EventHandlerName" /> 


当 我 们 为 一 个 XAML 标 签 的 事件 性 Attribute 进 行 赋 值 时 ，XAML 编 
辑 器 会 自动 为 我 们 生成 相应 的 事件 处 理 器 。 事 件 处 理 器 是 使 用 C# 语 言 编 
写 的 图 数 。 以 <Button> 标 俭 为 例 ， 当 为 Click 赋 值 时 ， 你 会 看 到 如 图 3-7 
中 所 示 的 提示 。 


«Button xName="button1" Click-" l 





IK|3-7. JgClickll E IST Sez HJ ez ë P. 


如 果 此 时 按 下 Enter 键 ，VS ”2008 会 自动 为 我 们 生成 一 个 事件 处 理 
4, JfjR CA RAAZ) 赋值 给 Click。 此 时 的 XAML 代 码 是 : 


«Button x:Name-" button" Chck= buttonl Chek 产 


在 button1_Click 上 右 击 ， 在 弹出 玉音 中 选择 Navigate to Event 
Handler (如 图 3-8 所 示 〉 ， 束 可 跳 转 到 由 VS 2008 H 5/4: GT) SAT AERE 28 
H, 


«Button x:Name="button1" Glick= button — a 
-S| | View Designer 


View Code 
Navigate to Event Handler 


Cut 


Copy 
Paste 


Outlining 





图 3-8 3% H 3 h H Navigate to Event Handler 选 项 
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MEA E — 3, "ERI 1264816 N SIXAMLTVRS HE. 


private void button]. Click(object sender, RoutedEventArgs e) 


l 


如 果 把 <Button x:Name="button1" Click="button1_Click'"/> 这 人 句 代 码 
翻 详 成 C# 代 但 ， 基 本 上 十 这 样 : 


Button button] = new Button; 
button1.Clickt=new RoutedEventHandler(button] Click); 


Jë, CHE gS ja 5 REMH TAES, WEB 
与 表示 UI 的 XAMEL 代 码 分 开 。 这 些 C# 函 数 会 放 在 哪里 昵 ? 由 于 C# 文 持 
partial 类 ，XAML 标 签 又 可 以 使 用 x:Class 特 征 指 定 将 由 XAML 代 码 解析 
生成 的 类 与 哪个 类 合并 ， 因 此 ， 我 们 完全 可 以 把 用 于 实现 程序 逻辑 的 C# 
代码 放 在 一 个 文件 里 ， 把 用 于 摘 述 程序 UI 的 XAML 代 码 放 在 另 一 个 文件 
里 ， 并 且 让 事件 性 Attribute 充 当 XAML 与 C# 之 间 沟 通 的 纽带 一 ”设计 师 
用 XAMI 为 程序 创建 漂亮 的 “ 壳 ”(UI) 并 展现 给 客户 ;程序 员 用 C# 编 写 
程序 的 “ 壮 ”( 逻 辑 ) 、 从 后 人 台 文 持 前 面 的 “元 ” 这 种 将 逻辑 代码 与 UI 
代码 分 离 、 隐 马 在 UI 代码 后 和 面 的 形式 束 叫 作 “ 代 码 后 置 ”(Code- 
Behind) 。 


y —= 
LE x 
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x:Class 所 指定 的 类 进行 合并 。 有 两 点 需要 注意 的 是 : 

e 不 只 是 事件 处 理 器 ， 一 切 用 于 实现 程序 逻辑 的 代码 都 要 放 在 后 置 的 C# 文 件 中 。 

e 默认 情况 下 ，VS 2008 为 每 个 XAML 文 件 生成 的 后 置 代码 文件 名 为 “XAML 文 件 全 
名 .cs”， 比 如 XAML 文 件 名 为 MyWindow.xaml， 那 么 它 的 后 置 代码 文件 名 为 
MyWindow.xaml.cs。 这 样 做 是 为 了 方便 管理 文件 ， 但 并 不 是 必须 的 ， 只 要 XAML 解 析 堪 能 找到 
x:Class 所 指定 的 类 ， 无 论 你 的 文件 叫 什 么 名 字 都 可 以 。 


好 后， 给 大 家 介绍 一 个 有 意思 的 标签 x:Code， 使 用 它 可 以 把 本 
来 应 该 示 在 后 置 代码 里 的 C# 代 人 码 搬 到 XAML 文 件 里 来 。x:Code 的 内 容 一 
定 要 使 用 XML 语 言 的 <![CDATA[...]] 上 > 转 义 标签 。 





«Window x:Class-" WpfApplicationTree, Window l" 
xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" Window" Height-"200" Width-"200"5 


«Grid» 
«Button x:Name-"buttonl" Content-"OK" Clicks buttonl Click"/7 
«Gnd» 
«x:Code? 
<!|CDATA| 
private void button] Click(object sender, RoutedEventArys e) 
| 
MessageBox.Show("Bye! Code-Behind!"); 
| 
||" 
«Ix:Code- 
«Window? 


34 ”导入 程序 集 和 引用 其 中 的 名 称 空 间 


大 多 数 情 况 下 ， 根 据 染 构 设 计 一 个 程序 会 被 分 成 厂 干 个 相对 独立 的 
模块 来 编写 ， 每 个 模块 可 以 独立 编译 、 进 行 版 本 升级 。 模 块 与 模块 之 间 
有 时 会 存在 一 些 依赖 关系 ， 即 有 些 模块 需要 “借用 ”其 他 模块 中 的 功 
能 。.NETI 的 模块 称 为 程序 集 (Assembly) 。 一 般 情况 下 ， 使 用 VS 2008 
创建 的 是 解决 方案 (Solution)〉， 一 个 解决 方 采 束 古 一 个 完整 的 程序 。 
解决 方案 中 会 包含 若干 个 项 目 (Project) ， 每 个 项 目 是 可 以 独立 编译 
的 ， 它 的 编译 结 末 束 是 一 个 程序 集 。 利 见 的 程序 集 是 以 .exe 为 扩展 名 的 
可 执行 程序 或 者 是 以 .为 扩展 名 的 动态 链接 库 ， 大 多 数 情况 下 ， 我 们 
说 “引用 其 他 程序 集 ”的 时 候 ， 说 的 都 是 动态 链接 库 。 因 为 .NET 编 程 接口 
(Application Programming Interface, API) 以 类 和 类 级 别 的 单元 为 主 
ipei > PARTXE dO S] HFEF R VU ae | HI 
ZR AE. o 

AS Pg rn BIS BR ux ELCE ARIA RII. A ERTRIBIBUTERIZE 
避免 同名 类 的 冲突 。 比 如 一 个 程序 中 引用 了 LibA.dll 和 LibB.dll 两 个 类 
库 ， 这 两 个 类 库 中 都 有 一 个 叫 Converter 的 类 ， 如 果 没 有 名 称 空间 来 限定 


的 话 ， 编 译 需 将 分 不 清 程序 员 打 算 使 用 哪个 类 。 如 果 LibA.dll 中 的 
Converter 放 在 一 个 名 为 Microsoft 的 名 称 空 间 里 ，LibB.dll 中 的 Converter 
放 在 名 为 Google 名 称 衬 间 里 ， 程 序 员 耽 可 以 通过 Microsoft.Converter 和 
Google.Converter 来 区 分 这 两 个 类 了 。 
注意 
想 在 日 己 的 程序 里 引用 类 库 ， 需 要 分 三 步 来 做 : 

(1) 编写 类 库 项 目 并 编译 得 到 .dl 文件 或 者 获得 别人 编译 的 .dl 文件 。 

(2) 将 类 库 项 目 或 者 .dl 文件 引用 进 自己 的 项 目 。 

(3) 在 C# 和 XAML 中 引用 类 库 中 的 名 称 空间 。 


作为 稼 识 ， 编 写 和 引用 类 库 项 目 在 此 不 再 车 述 。 我 们 只 看 如 何在 
XAML 里 引用 类 库 中 的 名 称 空 间 和 类 。 需 要 记 住 一 点 : 把 类 库 引 用 到 项 
目 中 是 引用 其 中 名 称 空 间 的 物理 基础 ， 无 论 是 C# 还 是 XAML 都 是 这 样 。 
一 旦 将 一 个 类 库 引 用 进程 序 ， 束 可 以 引用 其 中 的 名 称 空 间 。 假 设 我 的 类 
库 程 序 集 名 为 MyLibrary.dll， 其 中 包 售 Common 和 Controls 两 个 名 称 空 
间 ， 而 且 已 经 把 这 个 程序 集 引 用 进 WPF 项 目 ， 那 么 在 XAML 中 引用 这 两 
个 名 称 空间 的 语法 是 : 


xmins: WA 4 -"clr-namespace: KEP 7 IRA F assembly K e X: FE" 


对 于 MyLibrary.dll 里 的 两 个 名 称 空间 ，XAML 中 的 引用 会 是: 








xmlns:common-" clr-namespace:Common;assembly-MyLibrary" 


xmlns:controls-" clr-namespace:Controls;assembly-My Library" 


让 我 们 分 析 一 下 XAML5 引 用 名 称 空 间 的 语法 。 

e xmlns 是 用 于 在 XAML 中 声明 名 称 空间 的 Attribute， 它 从 XML 语 
言 继承 而 来 ， 是 XML Namespace 的 缩写 。 

e 冒号 后 的 映射 名 是 可 选 上 时， 但 由 于 可 以 不 加 映射 名 的 默认 名 称 
空间 已 经 补 WPF 的 主要 名 称 空间 占用 ， 所 以 所 引用 的 名 称 空间 都 逢 要 加 
上 这 个 映射 名 。 了 映射 名 可 以 根据 喜好 目 由 选择 ， 但 团队 内 部 最 好 使 用 一 
致 的 命名 。 一 个 建议 就 是 使 用 类 库 中 名 称 空间 的 原名 或 者 缩 与 。 

e 引号 中 的 字符 串 值 确定 了 你 要 引用 的 是 哪个 类 库 以 及 闫 库 中 的 
哪个 名 称 空 间 。 我 知道 这 个 字符 串 的 与 法 看 上 去 挺 且 烦 ， 对 好 XAML 编 
和 辑 器 可 以 帮助 我 们 目 动 填 苑 它 〈 如 图 3-9 所 示 ) 。 


xmins:x-"http://schemas.microsoft com/winfx/2006/xaml" 

xmins.commonz'] 
Titles Window 一 一 一 一 一 一 一 一 
«Grid» sf http;//schemas.microsoft.co 
sif? http;//schemas.microsoft.com/xps/2005/06/documentstructure 


af WpfApplicationRef in assembly WpfApplicationRef 





























«lind» 


Ç | š Min dnas a WpfApplicationRef. Properties in assembly WpfApplicationRef 


sf Common in assembly MyLibrary 
aP Controls in assembly MyLibrary 
=P Microsoft.CSharp in assembly System 
af Microsoft.SglServer.Server in assembly System.Data 
af Microsoft.VisualBasic in assembly System 
af Microsoft. Win32 in assembly mscorlib 





图 3-9 XAMLZm $8 58 IJ EI 5/38 76 RE 
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些 名 称 空间 里 的 类 。 语 法 格式 是 : 
MHEARA.. MARA 
例如 使 用 Common 和 Controls 中 的 类 ， 代 码 是 这 样 : 


<common:MessagePanel x:Name="windowl"/> 


<controls:LedButton x:Name=" buttonl 性 
附加 一 点 额外 的 小 知识 。 我 们 发 现 ，XAML 中 引用 名 称 空间 的 语法 
与 C# 不 太一 样 。 最 大 的 差别 就 是 XAML 需 要 为 被 引用 的 名 称 空间 添加 一 
个 上 映射 名 ， 用 这 个 映射 名 来 代表 被 引用 的 名 称 空间 。 其 实 ，C# 也 可 以 这 
Ea HART, Kenma S. Bug. ÆC} 5| H Commons 
Controls 名 称 空 间 时 可 以 这 样 与 : 


using Cmn = Common: 


using Ctl = Controls: 
这 种 写法 在 名 称 较 长 的 名 称 空间 中 有 同名 类 时 比较 有 用 。 
35 XAMIL 的 注释 
XAML 的 注释 语法 亦 继承 自 XML。 语 法 是 : 
<|- 需 要 被 注释 掉 的 内 容 -> 


注意 
有 几 点 需要 注意 的 是 : 
e XAML 注 释 只 能 出 现在 标签 的 内 容 区 域 ， 即 只 能 出 现在 开始 标签 和 结束 标签 之 间 。 
e XAML 注 释 不 能 用 于 注释 标签 的 Attribute。 
e XAML7EFE DREE. 


3.6 小结 


至 此 ， 我 们 已 经 走马 观 伦 地 了 解 了 XAML 的 基本 语法 。 知 识 虽 然 不 
多 ， 但 足以 保障 我 们 写 出 美观 的 程序 。 要 提醒 大 家 的 是 ，XAML 是 一 种 
很 灵活 的 语言 ， 特 别 是 一 些 用 于 人 简化 代码 的 缩 略 写法 。 这 些 看 上 去 比较 
奇怪 的 写法 基本 上 无 法 系统 地 用 章节 来 摘 述 ， 只 能 依靠 我 们 在 实际 工作 
中 慢 慑 积累 。 不 过 不 用 担心 ， 一 般 情 况 下 比较 复杂 的 代码 都 能 使 用 表面 
学 过 的 语法 解释 清楚 ， 比 如 接 下 来 的 一 章 一 一 x 名 称 空间 详解 。 





4 
x 名 称 空间 评 解 


字母 “x” 给 人 的 感觉 历来 是 未 知 、 和 神秘 、 酷 ..….... 不 过 ， 初 学 者 却 经 
季 和 伞 它 搞 得 军 头 转 癌 。 那 么 x 名 称 空间 是 怎么 来 的 、 又 是 做 什么 用 的 
呢 ? 简单 来 说 ，“ 和 名 称 空 间 ” 的 这 个 x 是 映射 XML 名 称 空 间 时 给 它 取 的 名 
字 【《 如 果 用 的 是 字母 y， 那 它 束 应 该 叫 “y 名 称 空间 了”) ; X 名 称 空间 里 
的 成 员 〔( 如 x:Class、x:Name) 是 专门 写 给 XAML 编 译 占 看 、 用 来 引导 
XAML 编 译 占 把 XAML 代 码 编译 成 CLR 代 人 码 的 《所 以 这 个 x 不 是 为 了 
酷 ， 而 是 XAML 的 首 字母 ) 。 

大 凡 包 含 XAML 代 码 的 WPF 程 序 都 需要 通过 语句 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 来 引入 
http://schemas.microsoft.com/winfx/2006/xaml 这 个 名 称 空间 。 

这 一 草 我 们 将 深入 这 个 名 称 空间 去 一 探 客 葛 ， 研 究 一 下 里 面 到 撒 都 
有 些 什 么 东西 。 


41 Xx 名称 空间 里 都 有 什么 


x 名 称 空间 映射 的 古 http://schemas.microsoft.com/winfx/2006/xaml， 
望 文生 义 ， 它 包含 的 类 均 与 解析 XAML 语 言 相关 ， 所 以 亦 可 称 之 
为 “XAML 名 称 空间 ”。 

与 C# 语 言 一 样 ，XAML 也 有 上 自己 的 编译 器 。XAML 语 言 会 被 解析 并 
编译 ， 最 终 形成 微软 中 间 语 言 存 储 在 程序 集中 。 在 解析 和 编译 XAML 话 
言 的 过 程 中 ， 我 们 经 党 需要 告诉 编译 占 一 些 重 要 的 信息 ， 比 如 XAML 代 
但 的 编 诺 结果 应 该 与 哪个 C# 代 人 码 的 编译 结果 合并 、 使 用 XAMEL 声 明 的 元 
系 是 public 还 是 private 访 问 级 别 竺 等。 这些 让 程序 员 能 够 与 XAML 编 译 
合 沟 通 的 工具 束 存 放 在 X 名 称 空 间 中 。 如 表 4-1 所 示 。 

表 4-1 Xx 名 称 空 间 中 包含 的 工具 


X:Array 
x: Class 


x:ClassModifier 


名 各 
x:Code 
x:FieldModifier 
x: Key 
x: Name 
x:Null 
x:Shared 
x:Static 
x:Subclass 
x: Type 
x: IypeArguments 
XUd 
x:X Data 


种 类 (在 XAML 中 出 现 的 形式 ) 
标签 扩展 


Attribute 


Attribute 


种 类 (在 XAML 中 出 现 的 形式 


XAML 指令 元 系 
Attribute 


Attribute 
Attribute 
bii JR 
Attribute 
标签 扩展 
Attribute 
标签 扩展 
Attribute 


Ë Attribute 


XAML 指令 元 素 


我 们 注意 到 ， 它 们 可 以 分 为 Attribute、 标 记 扩 展 和 XAML 指令 元 素 


三 类 。 下 面 分 别 说 一 说 它们 的 功能 。 
42 Xx 名称 空间 中 的 Attribute 


前 面 我 们 已 经 知道 ，Attribute 与 Property 是 两 个 层面 的 东西 。 
Attribute 是 语言 层面 的 东西 、 古 给 编 详 硕 看 的 ，Property 是 面 癌 对象 层 面 
的 东西 、 是 给 编程 逻辑 用 的 ， 而 且 一 个 XAML 标 签 的 Attribute 里 大 部 分 
都 对 应 着 对 象 的 Property。 在 使 用 XAML 编程 的 时 候 ， 如 果 你 想 给 它 加 


上 一 些 特殊 的 标记 从 而 


外 为 它 添 加 一 些 Attribute 了 。 比 如 ， 你 想 告诉 XAML 编 译 器 将 编译 结果 


呵 XAML 编 译 嚣 对 它 的 解析 ， 这 时 候 束 需要 知 


与 哪个 C# 编 译 的 类 合并 ， 这 时 候 就 必须 为 这 个 标签 添加 X:Class=" 目 标 类 


名 "这 样 一 个 Attribute 以 告知 XAML 编译 器 。X:Class 这 个 Attribute 并 不 是 
对 象 的 成 员 ， 而 是 我 们 把 它 从 xx 名称 空间 里 拿 出 来 硬 贴 上 去 的 。 
iE 13 98, — P5 H Attribute. 


4.2.1 x:Class 


这 个 Attribute 的 作用 是 告诉 XAML 编 译 器 将 XAML 标 签 的 编译 结果 
与 后 人 台 代 人 码 中 指定 的 类 合并 。 在 使 用 x:Class 时 必须 这 循 以 下 要 求 : 

e 这 个 Attribute 只 能 用 于 根 结 点 。 

e ”使 用 x:Class 的 根 结 点 的 类 型 要 与 x:Class 的 值 所 指示 的 类 型 保持 


e x:Class 的 值 所 指示 的 类 型 在 声明 时 必须 使 用 partial 天 键 字 。 
e x:Class 己 经 在 剖析 最 简单 的 WPF 程 序 时 讲 过 ， 此 处 不 再 歼 述 。 


4.2.2 x:ClassModifier 


这 个 Attribute 的 作用 是 告诉 XAML 编 译 由 标签 编译 生成 的 类 具有 怎 
样 的 访问 控制 级 别 。 


注意 
使 用 这 个 Attribute 时 需要 注意 : 
e 标签 必须 具有 x:Class Attribute. 
e x:ClassModifier 的 值 必须 与 x:Class 所 指示 类 的 访问 控制 级 别 一 致 。 
è xX:ClassModifier 的 值 随后 台 代 人 码 的 编译 语言 不 同 而 有 所 不 同 ， 参 见 TypeAttributes 枚 举 





— 
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这 里 举 个 例子 。 先 创建 一 个 WPF 项 目 并 编译 它 ， 把 编译 结果 用 IL 反 
编译 器 打开 ， 你 会 看 到 Window1 这 个 类 的 访问 级 别 为 public， 如 图 4-1 所 
人 小。 


| File View Help 


s. WpFApplicationl 
由 -上 wprapplicstiont Properties 
+ E EPE App 


4b zc publi din ansi si beforefiekdini 


: extends [PresenkationFr amework 5vekem.Wind 
| b implements [WindowsBase System. Windows. Me — 
^9 rontentLoaded : private bool 
— BE .ctor : void) 











图 4-1 ”类 Window1 的 访问 级 别 为 public 


然后 ， 为 XAML 文 档 中 的 <Window> 标 签 加 上 
x:ClassModifier="internal"。 此 时 如 果 编 译 则 会 收 到 一 个 编译 错误 ， 告 诉 
你 类 的 定义 有 证 突 。 我 们 去 C# 文 件 里 找到 Window1 类 的 声明 ， 把 声明 中 
的 public 也 改 成 internal， 然 后 再 编 详 。 把 编译 的 结果 用 正 反 编译 需 打 
开 ， 你 会 看 到 类 的 访问 级 别 变 成 了 private (之 所 以 是 private 而 不 是 
internal 是 因为 程序 集 级 别 的 internal private rfr) ， 如 f4- 2 所 示 。 





S-E wpfapplcationl 
+ S WpfFApplication1 .Properties 
由 Be iren App 


L... D — ea Wi 
— b implements [WindowsBase]5ystem, Windows, 
-$ rontentLoaded : private bool 

IE ctor : void) 

一 Initializecomponent : void 

















图 4-2 ”类 Window1 的 访问 级 别 变 为 了 private 
4.2.3 x:Name 


我 们 已 经 多 次 提 到 XAML 是 一 种 声明 式 语言 ， 但 你 是 否 想 过 XAML 
标签 声名 的 是 什么 昵 ? 其 实 ，XAML 的 标签 声明 的 是 对 象 ， 一 个 XAML 
标 俭 会 对 应 着 一 个 对 象 ， 这 个 对 象 一 役 是 一 个 控件 类 的 实例 。 在 .NET 平 
台 上 上， 类 是 引用 类 型 。 引 用 类 型 的 实例 在 使 用 时 一 般 是 以 “引用 者 - 实 
例 ” 的 形式 成 对 出 现 的 ， 而 且 我 们 只 能 通过 引用 者 来 访问 实例 。 当 一 个 
实例 不 再 被 任何 引用 者 所 引用 时 ， 它 就 会 被 当 作 内 存 垃 圾 而 被 销毁 。 

常见 的 引用 者 是 引用 变量 ， 但 这 并 不 是 唯一 的 。 比 如 下 面 这 上 段 
XAML 代 人 码 : 


«Window x:Class=" WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml" 

Title" Windowl" Height-300" Width="300"> 
<StackPanel> 

<TextBox Margin="5" /> 

«Button Content="OK" Margin-"5" Click="Button_Click" /> 
</StackPanel> 

«Window? 


ix BUR hBi CH D 37r, BRITA RT HA ila: 
ZR SOR RIAL TER AREE F. F iButton h Click EF AP EBE 28 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
StackPanel stackPanel = this.Content as StackPanel; 
TextBox textBox = stackPanel.Children|0] as TextBox; 
if (string.IsNullOrEmpty(textBox.Name)) 
i 


textBox.Text = "No name!": 


textBox.Text = textBox. Name; 


| 
| 


Window1.Content 属 性 引用 看 StackPanel 的 SB fü StackPanel SE fi 
TJ Children[0] X. 5] HZ TextBoxH] KA] EÆCHF, RARI iR X ER ZJ“ 
参数 的 属性 >) . AIDE fF XeTL £, Wa UKER PBOE3EIRIBI E 
行 类 型 转换 。 最 后 ， 文本 框 里 显示 “No name!” . 

虽然 理论 上 我 们 可 以 使 用 这 种 方法 访问 到 UI 上 的 用 有 和 天 ; Hx te 
END S o WRA: XAML 这 种 对 象 声 明 语言 只 负责 声明 对 象 而 不 
负责 为 这 些 对 象 声 明 引用 变量 。 如 果 我 们 需要 为 对 象 准备 一 个 引用 变量 
以 便 在 C# 代 码 中 直接 访问 承 必 须 显 式 地 告诉 XAML u PE 68 为 这 个 对 
象 声 明 引用 变量 ， 这 时 xName 惑 铂 上 用 场 了 。 


y —= 
LE x 








x:Name 的 作用 有 两 个 : 

(1) 告诉 XAML 编 译 器 ， 当 一 个 标签 带 有 x:Name 时 除了 为 这 个 标签 生成 对 应 实例 外 还 要 
为 这 个 实例 声明 一 个 引用 变量 ， 变 量 名 束 是 x:Name 的 值 。 

(2) 将 XAML 标 签 所 对 应 对 象 的 Name 属 性 (如 果 有 ) 也 设 为 x:Name 的 值 ， 并 把 这 个 值 
注册 到 UI 树 上 ， 以 方便 查找 。 


让 我 们 做 个 小 实验 "iz 编 详 硕 打 
H 你 会 及 现 Window1 基 人 r. aE xs 
加 x:Name， 代 人 码 变 成 这 样 : 























<SlackPanel> 

<TextBox x:Name-"textBox" Margin="5" /> 

«Button Content-" OK" Margin-" 5" Clek="Button Click" /= 
</StackPanel> 


因为 TextBox 的 实例 由 名 为 textBox 的 引用 变量 所 引用 ， 所 以 我 们 可 
以 通过 引用 变量 直接 访问 实例 ，Button.Click 事 件 处 理 器 中 的 间接 查找 代 
R5 (5,39 n] EAE WS d : 


private void Button. Click(object sender, RoutedEventArgs e) 


I 
| 


//StackPanel stackPanel = this.Content as StackPanel; 
/TextBox textBox = stackPanel.Children[0] as TextBox; 
if (string.IsNullOrEmpty(textBox.Name)) 

| 


textBox. Text = "No namel ， 


textBox, [ext = textBox. Name: 


| 


单 击 按钮 后 ，TextBox 中 出 现 “textBox”， 说 明 x:Name 不 但 让 编译 器 
声明 了 引用 变量 ， 同 时 还 为 实例 的 Name 属 性 赋 了 值 。 使 用 I 开 反 编译 占 
奏 看 编 详 结果 ， 你 能 在 Window1 关 中 找到 textBox 这 个 字段 。 注 意 ， 如 末 
一 个 标签 对 应 的 实例 疫 有 Name 这 个 属性 ， 那 么 坟 Name 作 用 束 只 剩 下 为 
这 个 实例 创建 引用 变量 了 。 

经 党 会 有 初学 者 问 : 在 XAML 代 人 码 中 是 应 该 使 用 Name 呢 ， 还 是 
x:Name? Name 属 性 定义 在 FrameworkElement 类 中 ， 这 个 类 是 WPFE 控 件 
的 基 类 ， 上 所 以 所 有 WPEF 探 件 都 具有 Name 这 个 属性 。 当 一 个 元 素 具 有 
Name 必 性 时 ， 你 使 用 Name 或 X:Name 效 果 是 一 样 的 。 比 如 <Button 
x:Name="btn"/> 和 <Button Name="btn"/>，XAML 编 译 器 的 动作 都 是 声明 
名 为 bm 的 Button 类 型 变量 并 引用 一 个 Button 类 型 实例 ， 而 且 此 实例 的 
Name 属 性 值 亦 为 bm。 此 时 ，Name 和 x:Name 是 可 以 互 换 的 ， 只 是 不 能 
同时 出 现在 一 个 元 系 中 。 对 于 那些 没有 Name 属 性 的 元 系 ， 为 了 在 


XAML 声 明 时 也 创建 引用 变量 以 便 在 C# 代 了 玛 中 访问 ， 我 们 就 只 能 使 用 
Xx:Name。 因 为 X:Name 的 功能 普兰 了 Name 属 性 的 功能 ， 所 以 全 部 使 用 
X:Name 以 增强 代码 的 统一 性 和 可 旋 性 。 


4.2.4 x:FieldModifier 


fi Hjx:Name/H, XAML R28] PISA RAH 6. E esI HAE, 
而 且 这 齿 引 用 变量 都 十 闫 的 字段 。 既然 是 类 有 的 字段 就 免不了 要 关注 一 下 
它们 的 访问 级 别 。 默 认 情 况 下 ， 这 些 字 段 的 访问 级 别 按 照 面 同 对 象 的 封 
装 原 则 被 设置 成 了 internal。 在 编程 的 时 候 ， 有 时 候 我 们 需要 从 一 个 程序 
集 访问 为 一 个 程序 集中 窗 体 的 元 系 ， 这 时 候 就 需要 把 被 访问 控件 的 引用 
变量 改 为 public 级 别 ，x:FieldModifier 就 是 用 来 在 XAML 里 改变 引用 变量 
访问 级 列 的 。 

如 果 这 样 声 明 一 个 窗 体 中 的 控件 : 


<StackPanel> 
<TextBox x:Name="textBox1" x:FieldModifier="public" Margin="5"/> 
<TextBox x:Name="textBox2" x:FieldModifier="public" Margin="5"/> 
<TextBox x:Name="textBox3" Margin="5"/> 

</StackPanel> 


B FRIL CH aA ER, LE a EM ER. 




















File View Help 


m implements [WindewsBase ]5vstem. Winc 4 
|--€9  contentLoaded : private bool 
— 49 textBox1 : public class [PresentationFrar 

Ọ textBox2 : public class [PresentationFrar | 


— Q9 textBox3 : assembly class [Presentationf 
Bl ctor : void 
| HI | 


„assembly WpfFApplicationi 




















图 4-3 ”使 用 与 不 使 用 x:FieldModifier 的 引用 变量 的 编译 结果 的 对 比 
textBox1 和 textBox2 的 访问 级 别 被 设置 为 public， 而 textBox3 的 访问 


级 别 仍 为 默认 的 internal ( 即 程序 集 级 别 ) 。 





注意 
为 x:FieldModifier 是 用 来 改变 引用 变量 访问 级 别 的 ， 所 以 使 用 x:FieldModifier 的 前 提 是 这 
个 标签 同时 也 使 用 x:Name， 不 然 何 来 的 引用 变量 呢 ? 








4.2.5 x:Key 


最 自然 的 检索 方式 莫 过 于 使 用 “Key-Value” 对 的 形式 了 。 在 XAML 
文件 中 ， 我 们 可 以 把 很 多 需要 多 次 使 用 的 内 容 提 取出 来 放 在 资源 字典 
(Resource Dictionary) 里 ， 需 要 使 用 这 个 资源 的 时 候 束 用 它 的 Key 把 它 

X:Key 的 作用 天 是 为 资源 贴 上 用 于 检索 的 索引 。 在 WPF 中 ， 几 乎 每 
个 元 素 都 有 自己 的 Resources 属 性 ， 这 个 属性 是 个 “Key-Value” 式 的 集 
合 ， 只 要 把 元 系 放 进 这 个 集合 ， 这 个 元 系 吏 成 为 资源 字典 中 的 一 个 条 
目 ， 当 然 ， 为 了 能 够 检索 到 这 个 条 件 ， 束 必须 为 它 添 加 XKey。 资 源 
(Resources) 在 WPF 中 非常 重要 ， 需 要 重复 使 用 的 XAML 内 容 ， 如 
E T mn 我 们 将 在 后 面 的 章 市 
详细 讨论 。 

在 这 里 ， 我 们 使 用 一 个 例子 简单 地 说 明 x:Key 的 用 法 。 我 们 先 在 
Window1 的 资源 字典 里 添加 一 个 条 目 ， 这 个 条 目 是 一 个 字符 串 ， 我 们 将 
在 XAML 和 C# 中 多 次 使 用 这 个 字符 串 。 

先 让 我 们 看 XAML 代 人 码 : 


«Window x:Class-"WpfApplicationl. Window!" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys-" clr-namespace:System;assembly-mscorlib" 

Title=" Window" Height-" 130" Width="200"> 
<Wimdow. Resources> 
<sys:String x:Key="myString">Hello WPF Resourcel</sys:String> 
</Window.Resources> 
<StackPanel Background="Gray" > 
<TextBox Text="!StaticResource ResourceKey=myString!" Margin="5"/> 
<TextBox x:Name="textBox1" Margin="5"/> 
«Button Content-" Show" Click="Button Click" Margin="5"/> 
</StackPanel> 
«Window? 


为 了 在 XAML 中 使 用 String 类 ， 我 们 用 xmlns:sys="clr- 
namespace:System;assembly=mscorlib" 引 用 了 mscorlib.dll， 并 把 其 中 的 
System 名 称 空 间 映 射 为 XAMEL 中 的 Sys 名 称 空 间 。 然 后 ， 我 们 使 用 属性 标 
A Wii IH Window.Resources H 2:7 f —P -E E88, HEE Bx: Key Ve E 
为 myString。 窗 体 的 StackPanel 里 包含 了 两 个 TextBox 和 一 个 Button。 在 
为 第 一 个 TextBox 议 置 Text 属 性 时 ， 我 们 用 到 了 myString 这 个 资源 ， 
此 ， 程 序 一 运行 我 们 就 可 以 看 到 第 一 个 TextBox 显 示 了 资源 字符 串 的 
值 ， 如 图 4-4 所 示 。 


| $3 Window1 


Hello WPF Resource! 





图 4-4 ”示例 代码 运行 结果 
资源 不 但 可 以 在 XAML 中 访问 ， 在 C# 中 也 可 以 访问 。 下 面 是 


Button.ClickE*] £F Ath 38 28 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
string str = this.FindResource("myString") as string; 
this.textBox |. Text = str; 


调用 一 个 拥有 Resources 属 性 的 对 象 的 FindResouce 方 法 就 可 以 在 它 
的 资源 字典 里 检索 资源 ， 检 索 到 资源 之 后 再 把 它 恢 复 成 正确 的 数据 类 型 
驶 可 以 使 用 了 。 单 击 投 钮 之 后 ， 我 们 可 以 看 到 第 二 个 文本 框 显示 出 同样 
的 字符 串 ， 如 图 4-5 所 示 。 





Hello WPF Resource! 











图 4-5”C# 中 访问 资源 的 结 
4.2.6 x:Shared 


在 学 习 x:Key 时 我 们 已 经 知道 ， 一 旦 我 们 把 菜 些 对 象 当 作 资 源 放 进 
资源 字典 里 后 就 可 以 把 它们 检索 出 来 重复 人 使用。 那么， 每 当 它 们 检索 到 
一 个 对 象 时 ， 我 们 得 到 的 完 葛 是 同一 个 对 象 呢 ， 还 是 这 个 对 象 的 多 个 副 
KE? AMEER Ax: Shared ikt AE J 。x:Shared 一 定 要 与 x:Key 配 
合 使 用 ， 如 果 x:Shared 的 值 为 tue， 那 么 每 次 检索 到 这 个 对 象 时 ， 我 们 得 
到 的 都 是 同一 个 对 象 ， 和 否则 如 果 X:Shared 的 值 为 false， 每 次 我 们 检索 到 
这 个 对 象 时 ， 我 们 得 到 的 都 是 这 个 对 象 的 一 个 狐 副 本 。XAML 编 译 器 会 
为 资源 隐藏 地 添加 X:Shared="true"， 也 天 是 说 ， 默 认 情 况 下 我 们 得 到 的 
都 是 同一 个 对 象 。 


43 X 名 称 空间 中 的 标记 扩展 


从 前 面 的 章节 我 们 已 经 知道 ， 标 记 扩 展 (Markup Extension) 实际 


Ei BGMarkupExtension2S HJ ELBz B [H] BeJK H2 «— KAARTE rB mutu 
含有 一 些 这 样 的 类 ， 上 所 以 第 称 它们 为 x 名 称 空间 内 的 标记 扩展 。 让 我 们 
近 观 一 下 那些 常用 的 标记 扩展 。 


4.3.1 x:Type 


顾名思义 ，XType 的 值 应 诅 是 一 个 数据 类 型 时 名 称 。 一 般 情 况 下 ， 
我 们 在 编程 中 操作 有 的 是 数据 类 型 的 实例 或 者 是 实例 的 引用 ， 但 有 时 候 我 
们 也 会 用 到 数据 类 型 本 入。 

初学 者 往往 搞 不 清 数 据 类 型 与 类 、 结 构 、 枚 淮 这 些 名 词 之 则 的 天 
系 。 在 此 ， 我 来 澄清 一 下 。 我 们 拿 关 (Class 来 做 分 析 。 束 “类 ”这 个 名 
词 而 言 ， 它 是 共有 双重 身份 的 在 逻辑 层面 上 ， 类 是 现实 世界 对 象 经 过 
抽象 和 封装 后 的 结果 ;: 在 编程 层面 上 ， 我 们 会 使 用 这 个 类 去 创建 对 象 和 
引用 。 当 我 们 使 用 一 个 类 去 创建 对 象 的 时 候 ， 编 详 右 会 以 这 个 类 为 监 
本 、 按 照 类 的 成 员 的 多 守 在 内 存 中 开 悦 出 相应 大 小 的 一 块 内 存 ， 并 用 程 
序 员 指定 的 构造 占 刷 新 《 即 初 始 化 这 块 内 存 。 这 时 候 ， 类 所 元 当 的 角 
色 残 是 对 象 的 “模具 ”， 使 用 它 创 建 出 来 的 对 象 在 型 号 《〈 即 内 存 大 小 ) 和 
内 部 布局 上 都 完全 一 样 。 在 这 个 层面 上 上， 我 们 把 类 称 为 数据 类 型 
(Type) ， 其 实 ，Type 这 个 词 本 映 耽 具有 型 号 的 意思 。 以 此 类 推 ， 结 
构 、 枚 举 等 也 都 是 数据 次 型 。 同 时 ， 为 了 能 让 程序 员 在 编程 层面 上 目 由 
地 操作 这 些 数据 类 型 ， 比 如 在 不 知道 具体 数据 类 型 的 情况 下 创建 这 个 次 
型 的 实例 并 答 试 调用 它 的 方法 ，.NET Framework 中 还 包含 了 名 为 Type 的 
类 作为 所 有 数据 类 型 在 编程 层面 上 的 抽象 。 

当 我 们 在 XAML 中 想 表 达 采 个 数据 类 型 时 束 需 要 使 用 x:Type 标 记 扩 - 
展 。 比 如 某 个 类 的 一 个 属性 ， 它 的 值 要 求 是 一 种 数据 类 型 ， 当 我 们 在 
XAML 为 这 个 属性 赋值 时 束 要 使 用 x:Type。 请 看 下 和 面 这 个 例子 : 

自 先 ， 我 创建 了 一 个 Button 的 派生 类 。 


class MyButton : Button 
| 
public Type UserWindowType | get; set; | 


protected override void OnClick() 
i 
base.OnClick(); // WA Click 事件 
Window win = Activator.CreateInstance(this.UserWindowType) as Window; 
if (win != null) 
| 
1 


win.ShowDialog(); 


这 个 类 具有 一 个 Type 类 型 的 属性 ， 即 UserWindowType， 你 需要 把 
一 种 数据 次 型 当 作 值 赋 给 它 。 同 时 ， 这 个 类 还 重 写 了 基 类 的 OnClick 方 
PE 除了 可 以 像 基 类 那样 触发 Click 事 件 外 ， 还 会 使 用 
UserWindowType 所 存储 的 类 型 创建 一 个 实例 ， 如 果 这 个 实例 是 Window 
类 (或 其 派生 类 ) 的 实例 ， 那 么 就 把 这 个 窗 体 显示 出 来 。 

然后 ， 在 项 目 里 添加 了 一 个 名 为 MyWindow 的 Window 浅 生 类 。 臣 
的 UI 包 含 三 个 TextBox 和 一 个 Button， 背 景 为 浅 蓝 色 : 


«Window x:Class="WpfApplicationl.MyWindow" 
xmins="http:/schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" MyWindow" Height-" 170" Width= 20U0 > 

«StackPanel Background-" LightBlue"? 
«TextBox Margln= 5/7 
«TextBox MargIn= 5/7 
«TextBox Margin-"5"/7 
«Button Content-" OK" Margin="5"/> 

</StackPanel> 

</Window> 
最 后 ， 把 自 定 义 按 钮 添加 到 主 窗口 的 界面 上 ， 并 把 MyWindow 作 为 
一 种 数据 类 型 赋值 给 MyButton.UserWindowType 属 性 : 





«Window x:Class-" WpfApplicationl Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xamlD" 
xmlns:local-" clr-namespace: Wpf Application" 
Title-"Window]" Height-"300" Width-"300"» 
<StackPanel> 
<local:MyButton Content="Show" UserWindowType=" {x:Type TypeName=local:MyWindow}" Marpin="5"/> 
</StackPanel> 
«Window? 
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为 MyButton 和 MyWindow 这 两 个 自 定义 类 都 包含 在 当前 项 目的 名 称 空间 里 ， 所 以 把 当 
六 项 目的 名 称 空间 引用 进来 并 用 local 前 缀 映射 : xmlns:local="clr-namespace:WpfApplication1"。 
在 使 用 MyButton 和 MyWindow 时 也 要 为 它们 加 上 local 前 级 。 





回顾 一 下 标记 扩展 的 语法 ， 因 为 TypeExtension 类 的 构造 占 可 以 接受 
数据 类 型 名 作为 参数 ， 所 以 我 们 完全 可 以 这 样 写 : 


UserWindowType-" {x: Type local:MyWindow]" 
网 详 并 运行 程序 ， 羊 击 主 衫 体 上 的 按钮 ， 目 定义 窗 体 焉 会 显示 出 
来 ， 如 图 4-6 所 示 。 我 们 还 可 以 多 写 几 个 日 定义 窗 体 类 来 扩展 这 个 程 
序 ，a 到 时 候 只 需要 在 XAML 里 更 换 UserWindowType 的 值 束 可 以 了 。 


| E3 Window1 











— Eus 程序 的 运行 结果 
4.3.2 x:Null 
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DER 在 XAML 里 用 来 表示 空 值 的 是 x:Null。 让 我 们 来 
kau e 

大 多 数 时 候 我 们 不 用 显 式 地 为 一 个 属性 赋 null 值 ， 但 如 果 一 个 属性 
具有 默认 值 而 我 们 义 不 需 要 这 个 默认 值 时 束 需 要 显 式 地 设置 null 值 了。 
在 WPF 中 ，Style 的 作用 是 按照 一 定 的 审美 规格 设置 控件 的 各 个 属性 ， 程 
序 员 可 以 通过 为 控件 更 换 Style 来 产生 各 种 风格 角 异 的 效果 。 程 序 员 可 以 
逐个 为 控件 设置 Style， 也 可 以 为 一 个 Style 指 定 目标 控件 类 型 ， 一 旦 指定 
了 目标 类 型 那么 这 类 控件 的 实例 将 都 使 用 这 个 Style 除非 你 显 式 地 将 
某 个 实例 的 Style 属 性 设置 为 x:Null。 





<Window x:Class-"WpfApplication] Window" 
xmlins="http:/ schemas microsoft.com winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"x:Null Sample" Height-"300" Width-"300"- 
<Window. Resources> 
<style x:Key=" [x Type Button!" TargetType-" ix: Type Button} > 
«Setter Property="Width" Value="60"/> 
«Setter Property= Height" Value="36"/> 
«Setter Property-" Margin" Value="5"/> 
«iStyle» 
</Window. Resources> 
<StackPanel> 
«Button Content-" OK > 
«Button Content-" OK "/» 
«Button Content-" OK 六 
«Button Content-"OK" Style" {x:Null!"/> 
«IStackPanel^ 
«Window? 


上 面 的 例子 把 一 个 Style 放 在 了 Window 的 资源 里 并 把 它 的 XKey 和 
TargetType 都 设置 成 了 Button 共 型， 这 样 ，UI 上 的 所 有 Button 控 件 都 会 默 
认 地 被 套用 这 个 Style 除了 最 后 一 个 Button 为 它 显 式 地 把 Style 
设置 为 了 x:Null。 

在 这 个 Style 中 ， 把 按钮 的 Width 和 Height 设 置 成 近似 “黄金 分 割 比 ” 并 
在 四 周 加 了 5 个 像 系 的 留 日 ， 效 果 如 图 4-7 所 示 。 








| E" x:Null Sample x | 











43.3 ”标记 扩展 实例 的 两 种 声明 语法 


表面 我 们 已 经 认识 了 x:Type 和 x:Nul 两 个 标记 扩展 ， 并 使 用 了 它们 
的 转 义 字符 串 陈 声明 〈 即 使 用 花 括 号 括 起 来 的 字符 串 作 为 值 赋 给 标签 
Attribute 的 形式 ) 。 因 为 标记 扩展 也 是 标准 的 .NET 类 ， 上 所 以 ， 我 们 也 可 
以 使 用 XAML 标 全 来 声明 标记 扩展 的 实例 。 全 上 面 xXNul 的 例子 来 说 ， 
最 后 一 个 Button 的 代码 完全 可 以 写成 这 样 : 


«Button Content="OK"> 
<Button.Style> 
«x:Null/» 
«JButton.Style» 


«iButton» 
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简洁 ， 我 们 很 少 使 用 这 种 语法 。 但 有 一 个 例外 ， 那 就 是 x:Array 标 记 扩 展 
如 果 想 在 XAML 文 档 里 声明 一 个 包含 数据 的 x:Array 实 例 ， 必 须 使 用 
标 俭 式 声 明 才 能 做 到 。 





4.3.4 x:Array 
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的 ArrayList 实 例 ，ArrayList 内 成 员 的 类 型 由 xX:Array 的 Type 指明 。 下 面 这 
ART X30 — x: Array 24 E 2509838 I8] — 4 ListBox te £525 95 o 

在 WPF 中 把 包含 数据 的 对 象 称 为 数据 源 (Data Source) 。 WR AR 
一 个 x:Array 的 实例 作为 数据 源 提 供给 一 个 ListBox 的 话 ， 代码 是 这 x Ë: 


«Window x:Class="WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:sysz "clr-namespace:System;assemblyzmscorlib" 

Title-" Window" Height-" 120" Width-" 160" 
«rd Background-" LightBlue" 

«ListBox Margin= 5" ItemsSourcez" [x:Árray Typezsvs:String]"/» 
«fand» 


«Window? 


此 时 ， 作 为 数据 源 的 x:Array 实 例 是 没有 数据 可 提供 的 ， 所 以 需要 我 
们 为 x:Array 实 例 添加 一 些 数据 。 这 时 问题 就 出 现 了 : In] ArrayExtension 
中 添加 数据 需要 调用 它 的 AddChild 方 法 ， 而 在 XAML 中 我 们 无 法 编写 远 
辑 代 码 。 同 时，ArrayExtension 的 Items 属 性 是 只 谈 的 ， 所 以 ， 我 们 也 不 
可 能 使 用 ItemsSource="{x:Array Type=sys:String Items=XXXXXX}" 的 形 
式 为 其 赋值 。 我 们 只 能 改 用 标 俭 声 明 语法 : 


<ListBox Margln= 3 > 
«ListBox.ItemsSource- 
«x:Array Typez"sys:String"» 
«sys:String» Tim«/sys:String» 
«sys:String» Tom«/sys:String» 
«sys:String» Victore/sys:String» 
«Ix:Array» 
«/ListBox.ItemsSource 
i ListBox? 
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的 代码 把 <x:Array> 标 签 的 子 元 素 逐 个 添加 到 x:Array 实 例 的 Items 里 。 运 


行程 序 ， 效 霖 如 图 4-8 所 示 。 

















图 4-8 ”x:Array 应 用 示例 


最 后 ， 让 我 们 看 一 下 ArrayExtension 的 源 代 但 请 断 : 


public class ArrayExtension : MarkupExtension, LAddChild 
| 
private ArrayList arrayList = new ArrayList(); 
private Type arrayType; 


i| SKU RUR s 
public ArrayExtension() | | 


I| i Type 参数 的 构造 器 
public ArrayExtension(Type array Type) 
I 
ll .. 
_ array [ype = array Type: 
| 


I| W Array 参数 的 构造 器 
public ArrayExtension(Array elements) 
| 
_arrayList.AddRange(elements); 
array Type = elements.GetType().GetElementTypet); 


I| 向 内 部 ArrayList 实例 添加 元 素 
public void AddChild(Object value) 
| 

_arrayList.Add(value): 


public void AddText(string text) 
| 
AddChild(text); 


/Type 属性 ， 并 指明 是 XAML 中 的 固定 位 置 参数 
[ConstructorArgument("type")] 
public Type Type 
| 
get { return arrayType; | 


set |. arrayType = value; | 


Il tems 属性 ， 并 没有 要 求 具体 类 型 ， 但 一 定 是 IList 的 派生 类 
让 RANES: Items 属性 是 只 该 的 

public IList Items 
| 


get { return. arrayList; j 


I! FERES DER 
I| 注意 : 它 是 将 内 部 ArrayList 根据 Type 属性 转换 成 Array 后 以 对 象 的 形式 提供 的 
public override object Provide Value(IServiceProvider serviceProvider) 
| 
object retArray = null; 
ll 


retArray = arrayList. ToArray(. arrayType); 


return retÁrray; 


4.3.5  x:Static 


x:Static 是 一 个 很 常用 的 标记 扩展 ， 它 的 功能 是 在 XAML 文 档 中 使 用 
数据 类 型 的 static 成 员 。 因 为 XAML 不 能 编写 馆 辑 代码 ， 所 以 使 用 x:Static 
访问 的 static 成 员 一 定 是 数据 类 型 的 属性 或 字段 。 我 们 看 一 个 例子 : 

首先 ， 为 Window1 添 加 两 个 static 成 员 ， 一 个 是 static 字 7 段 ， 一 个 是 


static 属 性。 


public partial class Window] : Window 
| 
public static string WindowTitle = "lif H 2"; 
public static string ShowText Í get { return "水 落石 出 "; } 


publie Window!() 
| 

InitializeComponent( ); 
| 


| 
然后 ， 在 XAML 中 使 用 x:Static 来 访问 这 两 个 成 员 : 


«Window x:Class="WpfApplicationl.Windowl" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz"clr-namespace: WpfA pplication] " 

Title=" {x:Static local: Window1.WindowTitle]" Height-" 120" Width-" 300 > 
«StackPanel- 
<TextBlock FontSize-"32" Textz" [x:Statie local: Windowl.Show Text] "7 
«/StackPanel^ 
</Window> 


运行 程序 ， 看 到 的 结果 如 图 4-9 所 示 。 


| 重山 高 月 小 

















注意 
如 果 一 个 程序 需要 国际 化 文 持 ， 一 般 会 把 需要 显示 的 字符 串 你 存在 一 个 资源 类 的 static 属 
性 中 ， 所 以 支持 国际 化 的 程序 UI 中 对 x:Static 的 使 用 非常 频繁 。 


44 XAML 指令 元 素 
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e x:Code 

e x:XData 

我 们 已 经 在 代码 后 置 一 节 介 绍 过 <x:Code> 标 签 ， 它 的 作用 就 是 可 以 
包含 一 些 本 应 放置 在 后 置 代 码 中 的 C# 代 但 。 这 样 做 的 好 处 是 不 用 把 
XAML 代 码 和 C# 代 人 码 分 置 在 两 个 文件 中 ， 但 大 不 是 过 到 某 些 极 并 环境 我 
想 应 设 没 人 这 么 干 ， 这 样 做 最 大 的 问题 束 代 人 码 不 好 维护 、 不 吻 调 试 。 

x:XData 标 签 是 一 个 专用 标签 。WPF 中 把 包含 数据 的 对 象 称 为 数据 
源 ， 用 于 把 数据 源 中 的 数据 提供 给 数据 使 用 者 的 对 象 被 称 为 数据 提供 者 
(Data Provider) 。WPF 关 库 中 包含 多 种 数据 提供 者 ， 其 中 有 一 个 奖 叫 
XmlDataProvider， 专 门 用 于 提供 XML 化 的 数据 。 如 果 想 在 XAML H 
明 一 个 市 有 数据 的 XmlDataProvider 实 例 ， 那 么 XmlDataProvider 实 例 的 
数据 就 要 放 在 x:XData 标 签 的 内 容 里 。 示 例如 下 : 


<Window.Resources> 
«XmlDataProvider x:Keyz"InventoryData" XPathz"Inventory/Books"? 
«x:XData» 
«Supermarket Xmlns= > 
«Fruits» 
«Fruit Name= Peach /> 
«Fruit Namez"Banana"/» 
«Fruit Namez"Orange"/» 
</Fruits> 
<Drinks> 
«Drink Name= Coca Cola /> 
«Drink Name= PEPSI Cola"/» 
</Drinks> 
«Supermarket? 
«Ix: XData» 
«|XmlDataProvider? 


«AVindow.Resources? 


45 小结 


至 此 ， 我 们 可 以 说 已 经 比较 完整 地 掌握 了 XAML 的 语法 和 常用 元 
系 。 有 了 这 些 知 识 ， 我 们 束 可 以 动手 去 创建 优雅 的 布局 和 炫丽 的 界面 


了 。 接 下 来 的 章节 将 使 用 前 面 学 到 的 XAML 语 法 和 x 和 名 称 空间 里 的 元 
系 、 结 合 琳 限 满 目的 WPF 控 件 建立 实用 的 软件 界面 。 


5 
控件 与 布局 


5.1 TEC SETA 


程序 的 本 质 是 “数据 十 算法 ” 用 户 输入 原始 数据 ， 算 法 处 理 原 始 
数据 并 得 到 结果 数据 。 问 题 天 在 于 程序 如 何 将 结果 数据 显示 给 用 户 。 同 
样 一 组 数据 ， 你 可 以 使 用 LED 阵 列 显 示 出 来 ， 或 者 是 以 命令 行 模式 傅 助 
各 种 格式 控制 字符 〈 如 Tab) 对 齐 并 输出 ， 但 这 些 都 不 如 图 形 化 用 户 界 
H (Graphic User Interface, GUI) 来 的 友好 和 方便 。GUI 的 方便 之 处 在 
于 它 对 数据 表达 的 百 观 性 ， 程 序 员 可 以 使 用 编程 手段 把 数据 之 间 的 关系 
以 独 形 的 方式 展现 出 来 ， 从 而 免除 了 用 户 面 对 一 大 扒 抽 和 象 数 据 的 痛 震 ， 
提高 了 工作 效率 、 普 及 了 计算 机 的 操作 。 

GUI 是 程序 界面 的 优胜 者 ， 但 在 windows 上 实现 图 形 化 的 界面 却 有 
多 种 方法 ， 每 种 方法 又 拥有 目 己 的 一 性 开发 理念 和 工具 。 每 种 GUI 开发 
方法 与 它 的 理念 和 工具 共同 组 成 一 种 方法 论 ， 间 见 的 有 : 

e Windows API (Win API) : 调用 Windows 底 层 绘 图 函数 ， 使 用 
CC 语言， 最 原始 也 最 基础 。 

e Microsoft Foundation Class (MFC) : 使 用 C++ 语法 将 原始 的 
Win32API 函 数 封 装 成 控件 类 。 

e Visual Component Library (VCL) : Delphi 和 C++ Builder 使 用 的 
与 MEFC 相 近 的 控件 类 库 。 

e Visual Basic+ActiveX 探 件 (VB6) : 使 用 组 件 化 的 思想 把 
WinAPI 封 站 成 UI 控件 ， 以 期 多 语言 共用 。 

e Java Swing/AWT: Java SDK 中 用 于 跨 平台 开发 GUI 程 序 的 控件 
类 库 。 

e Windows Form: .NET^E €; EXQtfTGUDT X WJ Z BJ), EHA 
件 化 但 需要 .NET 运 行 时 支持 。 

e Windows Presentation Foundation (WPF) : 后 起 之 秀 ， 使 用 全 
新 的 数据 张 动 UI 的 理念 。 

ZJ Windows GUI 开 有 历史， 可 以 把 上 述 这 些 方 法 论 分 为 四 代 : 

e Win API 时 代 : 函数 调用 十 Windows 消 息 处 理 。 

e 封装 时 代 : 使 用 面 同 对 象 理念 把 Win API 封装 成 类 ; H% KUI 
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e 组 件 化 时 代 : 使 用 面 问 组 件 理念 在 类 的 基础 上 封装 成 组 件 ; YH 
恩人 补 封装 成 事件 ， 变 成 事件 驱动 。 

e WPF 时 代 : 在 组 件 化 的 基础 上 ， 使 用 专门 的 UI 设计 语言 并 引入 
由 数据 驱动 UI 的 理念。 

WPF 之 所 以 能 够 称 得 上 是 新 的 一 代 天 键 在 于 两 点 : 第 一 ， 之 前 几 代 
GUI 方 法 论 只 能 使 用 编程 语言 进行 UI 设计 ， 而 WPF 具 有 专门 用 于 UI 设计 
的 XAML; 58—, BÜJLTVCEULS ZUGE IT] AS H.7; IBI Xe EH Windows} I $145 
件 事 件 一 脉 相 承 ， 始 终 是 把 UI 控件 放 在 主导 地 位 而 把 数据 放 在 被 动 地 
位 ， 用 UI 来 驱动 数据 的 改变 ，WPF 在 事件 驱动 的 基础 上 引入 了 数据 驱动 
界面 的 理念 ， 让 数据 重 归 核心 地 位 而 让 UI 回归 数据 表达 者 的 位 置 。 

从 现在 开始 ， 你 束 要 在 心中 树立 起 这 样 一 个 概念 WPF 中 是 数据 
id 数据 是 核心 、 是 主动 的 ，UI 从 属于 数据 并 表达 数据 、 是 被 动 

UI 的 功能 是 让 用 户 观察 和 操作 数据 ， 为 了 让 用 户 观 察 数 据 ， 我 们 需 
要 用 UI 元 系 来 显示 数据 ;为 了 让 用 户 操 作 数 据 ， 我 们 需要 用 UI 元 素 啊 应 
用 户 的 操作 。WPF 把 那些 能 够 展示 数据 、 啊 应 用 户 操作 的 UI 元 系 称 为 控 
fF (Control〉。 探 件 所 展示 的 数据 ， 我 们 称 之 为 控件 的 “数据 内 容 ”;， 控 
件 在 啊 应 用 户 的 操作 后 会 执行 日 己 的 一 些 方 法 或 以 事件 (Event) 的 形 
式 通 知 应 用 程序 〈 程 序 员 可 以 决定 如 何 处 理 这 些 事 件 ) ， 我 们 称 之 为 控 
件 的 “行为 ?或 “算法 内 容 ”。 可 见 ，WPF 中 的 控件 扮演 着 双重 角色 、 是 个 
非常 抽象 的 概念 Control 是 数据 和 行为 的 载体 ， 而 无 需 具 有 固定 的 形 
象 。 换 句 话 说 ，Button 之 所 以 是 Button 不 是 因为 它 长 得 方 方 正 正 、 显 示 
一 串 文 字 并 且 能 够 啊 应 用 户 单 击 ， 而 是 应 该 倒 过 来 想 凡是 人 符合 “能 
显示 一 些 提 示 内 容 〈 可 以 是 文字 ， 也 可 以 是 图 片 、 动 国 甚 至 视频 ) 并 能 
啊 应 用 户 单 击 ” 这 一 抽象 概念 的 UI 元 素 都 可 以 是 Button， 至 于 一 个 Button 
具体 长 成 什么 样子 〈 是 方 是 圆 、 是 显示 文字 还 是 显示 动 男 ) 完全 由 它 的 
风格 (Style) 和 模板 (Template) 来 决定 ; CheckBox 之 所 以 是 
CheckBox 也 不 是 因为 它 有 一 个 Box 可 供 你 Check 只 要 是 用 来 显示 一 
个 bool 类 型 值 并 人 允许 用 户 通 过 单 击 来 切换 true/falsenull 的 UI 元 素 ， 那 它 
束 是 一 个 CheckBox。 总 之 ， 在 WPE 中 谈 控 件 ， 我 们 关注 的 应 该 是 抽象 
的 数据 和 行为 而 不 是 控件 具体 的 形象 。 控 件 的 Template 和 Style 在 后 面 章 
TH VESTE e 

粗略 而 言 ， 日 党 工作 中 我 们 打交道 最 多 的 控件 无 外 平 6 类 ， 即 : 

(1) 布局 控件 : 可 以 容纳 多 个 控件 或 艇 登 其 他 布局 控件 ， 用 于 在 
UI 上 组 织 和 排列 控件 。Grid、StackPanel、DockPanel 等 控件 都 属 此 类 ， 
它们 拥有 共同 的 父 类 Panel。 














(2) 内 容 控 件 : 只 能 容纳 一 个 其 他 控件 或 布局 控件 作为 它 的 内 
容 。Window、Button 等 控件 属于 此 类 ， 因 为 只 能 容纳 一 个 控件 作为 其 内 
容 ， 所 以 经 党 需要 借助 布局 控件 来 规划 其 内 容 。 它 们 的 共同 父 类 是 
ContentControl. 

(3) 市 标题 内 容 控 件 ， 相当 于 一 个 内 容 控 件 ， 但 可 以 加 一 个 标题 

(Header) ， 标 题 部 分 亦 可 容纳 一 个 控件 或 布局 。GroupBox、Tabltem 

竺 是 这 类 控件 的 典型 代表 。 它 们 的 共同 父 类 是 HeaderedContentControl。 

(4) 条 目 控 件 : 可 以 显示 一 列 数据 ， 一 般 情 况 下 这 列 数据 的 类 型 
相同 。 此 类 控件 包括 ListBox、ComboBox 等 。 它 们 的 共同 基 类 是 
ItemsControl。 此 类 控件 在 显示 集合 类 型 数据 方面 功能 非常 强大 。 

(5) 市 标题 条 目 控件 : 相当 于 一 个 条 目 控 件 加 上 一 个 标题 显示 
区 。TreeViewItem、MenuItem 都 属于 此 类 探 件 。 这 次 控件 往往 用 于 最 示 
层级 关系 数据 ， 结 点 显示 在 其 Header 区 域 ， 子 级 结 点 则 显示 在 其 条 目 控 
件 区 域 。 此 类 控件 的 共同 基 类 是 HeaderedItemsControl。 

(6) 特殊 内 容 控 件 ， 比 如 TextBox 容 纳 的 是 字符 串 、TextBlock9J 
以 容纳 可 日 由 控制 格式 的 文本 、Image 容 纳 图 厂 类 型 数据 ...... 这 类 控件 
相对 比较 独立 。 

6 类 控件 的 派生 关系 如 图 5-1 所 示 。 


Dependency Object 


UIElement 








FrameworkElement 
ItemsControl | TextBox 


HeaderedContentControl HeaderedltemsControl | 


图 5-1 6 类 控件 的 派生 关系 








ContentC ontrol 
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细心 的 读者 可 能 会 问 :“ 为 什么 要 在 FrameworkElement 处 放置 一 条 分 隔 线 呢 ? 
FrameworkElement 的 Eramework 与 NET Framework 的 Framework 是 什么 关系 ? ”问题 的 答案 是 : 


WPF 是 构建 在 .NET Framework 上 的 一 个 子 系 统 ， 它 也 是 一 个 用 于 开发 应 用 程序 的 框架 
(Framework) , FrameworkElementlfJFramework418 I] 3; WPF Framework. 而 


FrameworkElement 类 在 UIElement 类 的 基础 上 添加 了 很 多 专门 用 于 WPF 开 发 的 API (比如 
SetBinding 方 法 ) ， 所 以 从 这 个 类 开始 才 算 是 进入 WPF 开 发 框架 。 


下 面 我 们 将 详细 地 探讨 UI 元 素 的 种 类 与 布局 。 
52 ”WPF 的 内 容 模型 


日 第 生活 中 ， 内 容 的 表现 形式 多 种 多 样 一 一 日 稿 纸 上 的 文字 、 公 去 
和 图 形 是 内 容 ， 报 纸 上 的 文章 是 内 容 (但 其 有 标题 ) ， 货 品 清单 上 的 条 
目 也 是 内 容 〈 但 它 是 以 条 目 序列 的 形式 出 现 的 ) 。WPF 有 的 UI 元 素 也 是 这 
样 ， 它 们 有 者 不 拘 一 格 的 内 容 以 便 程 序 员 根 据 要 表达 的 数据 从 中 选择 。 
所 谓 物 以 类 聚 ， 根 据 是 含 可 以 搬 载 内 容 、 能 够 闻 载 什么 样 的 内 容 ， 
WPF 的 UI 元 聚 可 以 分 为 如 表 5-1 所 示 的 这 些 类 型 。 
表 5-1 WPF 的 UI 元 素 的 类 型 


名 称 注释 

 ContentControl E— H9 

HeaderedContentControl T bad E ER P ZH IE 

ItemsControl 以 条 目 集合 为 内 容 的 控件 

HeaderedItemsControl 市 标题 的 以 条 日 集合 为 内 容 的 控件 
 Decorator 控件 装饰 元 素 

Panel [IN S u 

Adorner XTARA 

Flow Text MALEK 

TextBox Y KA 
TextBlock PALT 

Shape 图 形 元 系 


下 面 我 们 逐一 训 析 这 些 元 系 的 内 部 结构 ， 了 解 内 容 与 内 容 属 性 。 

你 可 以 把 控件 想象 成 一 个 容 硕 ， 容 上 莫 里 竣 的 东西 束 古 它 的 内 容 。 挥 
件 的 内 容 可 以 直接 是 数据 ， 也 可 以 是 控件 。 当 控件 的 内 容 还 是 控件 的 时 
翁 束 形成 了 控件 的 垦 套 。 我 们 把 被 特 套 的 控件 称 为 子 级 控件 ， 这 种 控件 


HCEHEUMRB EREA EIL. [8] G YEPETEHK SE, PHULWPFIWJULSJE E — 
个 树 形 结构 。 如 果 不 考虑 控件 内 部 的 组 成 结构 ， 只 观察 由 控件 组 成 
的 “ 树 ”， 那 么 这 棵 树 称 为 逻辑 树 (Logical Tree) ; WPF 控 件 往往 是 由 更 
基本 的 控件 构成 的 ， 即 控件 本 映 束 是 一 棵 树 ， 如 果 连 控件 本 映 的 树 也 考 
虑 在 内 ， 则 这 标 比 多 辑 树 更 “ 索 戊 ?的 树 称 为 可 视 元 素 树 (Visual 
Tree) 。 
控件 是 内 存 中 的 对 象 ， 控 件 的 内 容 也 是 内 存 中 的 对 象 。 控 件 通 过 目 
己 的 某 个 属性 引用 着 作为 其 内 容 的 对 象 ， 这 个 属性 称 为 内 容 属性 
(Content Property) 。“ 内 容 属性 ”是 个 统称 ， 上 其 体 到 每 种 控件 上 ， 内 容 
属性 都 有 自己 确切 的 名 字 一 一 有 的 直接 就 叫 Content， 有 的 叫 Child; 有 
些 控件 的 内 容 可 以 是 集合 ， 其 内 容 属 性 有 叫 Items 或 Children 的 。 
DRS u sma Moss TM 
LUE. 
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“判断 一 种 编程 语言 精良 与 否 ， 很 重要 的 一 个 原则 就 是 程序 员 使 用 起 来 是 不 是 得 心 应 手 ， 
XAML 在 这 方面 做 的 很 好 ， 在 表达 UI 元 素 和 元 素 内 容 时 的 语法 非常 灵活 ， 了 情 于 理 者 说 得 过 





所 谓 “ 于 理 ?， 就 是 说 我 们 严格 按照 语法 来 行事 。 控 件 不 是 有 内 容 属 
E? 那 在 XAML 里 我 们 就 应 该 能 够 使 用 Attribute=Value 或 者 属性 标签 
的 形式 来 为 内 容 赋 值 。 比 如 想 把 字符 串 "OK" 作 为 内 容 赋 值 给 一 个 
Button， 下 面 两 种 写法 都 是 正确 的 : 


«Button Content-" OK"/» 


或 者 : 
<Button> 
<Button.Content> 
«sys:String* OK«/sys:String- 
</ Button. Content> 
</Button> 
所 谓 “ 于 情 ?”， 有 是 指 如 末 说 得 通 束 不 必要 非 按照 元 长 的 语法 一 板 一 眼 
来 行事 。 控 件 对 应 到 XAML 文 档 里 束 是 标签 ， 按 照 大 家 对 标 釜 语言 的 理 
解 ， 控 件 的 内 容 束 应 该 是 标签 的 内 容 、 子 级 控件 束 应 该 是 标签 的 子 级 元 
系 〔 人 简称 标签 的 元 系 )。 标 签 的 内 容 古 来 在 起 始 标 签 和 结束 标签 间 的 代 
僻 ， 因 此 ， 上 面 的 代码 也 可 以 写成 这 样 : 


<Button> 
<sys:String>OK</sys:String> 


</Button> 


换 句 话说 ，XAML 标 签 的 内 容 区 域 专 门 映 射 了 控件 的 内 容 属性 。 

有 些 探 件 的 内 容 是 一 个 集合 ， 如 StackPanel 的 内 容 属性 是 Children、 
ListBox H P3 ZJ&TEzé&Items, | Zg3x 2835: 4 Fr VS JW V] 45 Ee] — RE n] EA 3 S AI E 
属性 的 标签 。 以 StackPanel 为 例 ， 当 为 一 个 StackPanel 深 加 三 个 TextBox 
和 一 个 Button 时 ， 完 整 的 语法 应 该 是 这 样 : 


<StackPanel Background= Gray"? 
<StackPanel.Children> 
«TextBox Margin-"5"/7 
«TextBox Margln= 5/7 
«Button Content-" OK" Margin="5"/> 
«/StackPanel.Children? 


«[StackPanel- 
简化 后 的 代码 是 : 


<StackPanel Background= "Gray" 
«TextBox Margin= 3"/> 
zTextBox Margin= 3 /> 
«Button Content-" OK" Margin-" 3 /> 
</StackPanel> 
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我 们 把 符合 某 类 内 容 模型 的 UI 元 素 称 为 一 个 族 ， 每 个 族 用 它们 共同 
基 类 来 命名 。 
5.3.1  ContentControl/ X 


KRAMFA F: 

e JIRE H ContentControl% . 
e 它们 都 古 挖 件 (Control) 。 
e 内容 属 性 的 名 称 为 Content。 


e KEHE- ú Zü 4 FR. IJ 2 , | 

怎样 理解 “只 能 由 单一 元 系 人 充当 其 内 容 ” 这 人 句 话 呢 ?” 让 我 们 看 一 个 例 
j: 

Button 控 件 属于 这 一 族 ， 所 以 ， 下 面 两 个 Button 的 代码 都 是 正确 的 
一 一 第 一 个 Button 的 内 容 是 一 个 静态 文本 ， 第 二 个 Button 的 内 容 是 一 张 
图 片 。 


<StackPanel> 
<Button Margin="5"> 
<TextBlock Text="Hello"/= 
< Button> 
<Button Margin="5"> 
<]mage Source=".smile.png" Width="30" Height="30"/> 
</Button> 


</StackPanel> 
但 如 果 你 想 让 Button 的 内 容 既 包 含 文字 又 包含 图 片 是 不 行 的 : 


<StackPanel> 
«Button Margin="5"> 
<TextBlock Jext= Hello"? 
<Image Source-" smile.png" Width-" 30" Height-"30"/7 
«Button? 


«IStackPanel- 


编译 器 报错 说 “The object 'Button' already has a child and cannot add 
'Image'. 'Button' can accept only one child.>”， 即 明确 地 告诉 我 们 一 一 
Button 只 能 接受 一 个 元 素 作 为 它 的 Content。 

可 征 如 果真 的 需要 一 个 市 图 标的 Button 我 们 应 该 怎么 办 呢 ? 31] S 
了 ， 探 件 的 内 容 也 可 以 是 控件 ， 我 们 只 需要 先 用 一 个 可 以 包含 多 个 元 义 
的 布局 控件 把 图 片 和 文字 包装 起 来 ， 册 把 这 个 布局 控件 作为 Button 的 内 
容 束 好 了 布局 控件 评 见 5.3.8 庆 Panel 族 ) 。 

ContentControl 族 包含 的 控件 如 表 5-2 所 示 。 

表 5-2 ”ContentControl 族 包含 的 控件 


Button CheckBox ComboBoxltem 
ContentControl Grid ViewColumnHeader Groupltem 
Label ListBoxltem Navigation Window 


RadioButton RepeatButton ScrollViewer StatusBarltem 


ToggleButton ToolTip Window 


5.3.2 HeaderedContentControl/ A 


ZKJRJG S8 RE Ea UH F: 
e "1 Jl4 4E HeaderedContentControlZS, 
HeaderedContentControlzé ContentControl2S H3 JF 25 , 
e 它们 都 是 控件 ， 用 于 显示 惠 标 题 的 数据 。 
e 除了 用 于 显示 主体 内 容 的 区 域外 ， 控 件 还 具有 一 个 显示 标题 
(Header) HJK Eko 
e 内 容 属 性 为 Content 和 Header。 
e 无 论 是 Content 还 是 Header 孝 只 能 容纳 一 个 元 素 作 为 其 内 容 。 
HeaderedContentControl 族 包含 的 控件 如 表 5-3 所 示 。 
5-3 ” HeaderedContentControl 族 包含 的 控件 


Expander HeaderedContentControl Tabltem 


下 面 这 个 例子 是 一 个 以 图 标 为 Header、 以 文字 为 主体 内 容 的 
GroupBox， 效 果 如 图 5-2 所 示 。 


«arid? 
<GroupBox Margin-" 10^ BorderBrush-" Gray"? 











«GroupBox.Header? 
«Image Source-" 'smile.png" Width-"20" Height-"20"/7 
</GroupBox.Header> 
<TextBlock TextWrapping-" WrapWithOverflow" Margin-" 10" 
Text" RR A, RAIA- RBE- E, MARR Hm. "> 
</GroupBox> 


</Grid> 








š ' Smile Window 





一 标 树 、 一 匹 马 、 一 头 大 象 和 一 只 难 在 
一 起 ， 打 一 种 日 党 用 品 - 











图 5-2  GroupBox12 f/F zr f| 3 58. 
5.3.3 ItemsControl& 


dar pod 如 下 : 
IIR Æ Ej ItemsContro12 , 
e 它们 都 是 控件 ， 用 于 显示 列表 化 的 数据 。 
e 内容 属性 为 Items 或 ItemsSource。 
每 种 ItemsControl 都 对 应 有 自己 的 条 日 容器 (Item Container) 。 
本 族 的 包含 的 控件 如 表 5-4 所 示 。 


表 5-4 ItemsControl 族 所 包含 的 控件 


Menu ContextMenu ComboBox 
[temsControl ListView TabControl 
TreeView StatusBar 


y cu 
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本 族 控 件 最 有 特色 的 一 点 就 是 会 目 动 使 用 条 目 容 右 对 提交 给 它 的 内 容 进 行 包 装 。 合 法 的 
ItemsControl 内 容 一 定 是 个 集合 ， Age Hx dict e 为 内 容 提 
ItemsControl 不 会 把 这 个 集合 直接 拿 来 用 ， 而 是 使 用 上 自己 对 应 的 条 目 容 需 把 集合 中 的 条 目 逐 个 包 
装 ， 然 后 再 把 包装 好 的 条 目 序 列 当 作 目 己 的 内 容 。 这 种 上 自动 包装 、 就 是 允许 程序 员 [rJ 
ItemsControl 提 交 各 种 数据 类 型 的 集合 ， 程 序 员 在 思考 问题 时 会 目 然而 然 地 感 党 到 ItemsControl 控 
件 和 直接 装载 着 数据 ， 如 果 需 要 进行 增加 、 删 除 、 更 新 或 者 排序 ， 那 么 二 接 去 操作 数据 集合 惑 可 
以 ，UI 会 自动 将 改变 展现 出 来 。 这 正体 现 了 在 WPF 开 发 时 是 数据 直接 驱动 UI 再 进行 显示 。 

















ListBox 是 个 典型 的 ItemsControl， 下 面 将 以 它 为 例 ， 研 究 一 下 


[temsControl- 
自 完 ， 我 们 看 看 ListBox 的 日 动 包装 。WPF 的 ListBox 在 显示 功能 上 
比 Windows FEorm 或 者 ASP.NET 的 ListBox 要 强大 很 多 。 传 统 的 ListBox 只 


能 将 条 目 以 字符 串 的 形式 显示 ， 而 WPE 的 ListBox 除 了 可 以 显示 中 规 中 
官 的 字符 串 条 目 还 能 够 显示 更 多 的 元 叉 ， 如 CheckBox、RadioButton、 
mm IFE K, RI eteh EMES AUL fh P IH E 
尺码 : 


«Grid» 
«ListBox Margin= 3 > 
<CheckBox x:Name="checkBoxTim" Content="Tim"/> 
<CheckBox x:Name="checkBoxTom" Content="Tom"/> 
<CheckBox x:Name="checkBoxBruce" Content="Bruce"/> 
«Button x:Name="buttonMess" Content="Mess"/> 
«Button x:Name="buttonOwen" Content="Owen"/> 
«Button x:Name-"buttonVictor" Content="Victor"/> 
«/ListBox^ 
</Grid> 
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Í 8' Windowl 











图 5-3 ”ListBox 控 件 运行 效果 


表面 看 上 去 是 ListBox 直 接 包 含 了 一 些 CheckBox 和 Button， 实 际 上 并 
s 。 我 们 为 Victor 这 个 按钮 添加 Click 事 件 的 啊 应 ， 看 看 它 的 父 级 容 
> TA ° 


XAML: 
«Button x:Name-"buttonVictor" Content-" Victor" Click="buttonVictor Click"/> 
CE 
private void buttonVietor Click(object sender, RoutedEventArgs e) 
i 
Button btn = sender as Button: 
DependencyObject levell = VisualTreeHelper.GetParent(btn); 
DependencyObject level? = Visual TreeHelper.GetParent(levell ); 
DependencyObject level3 = Visual TreeHelper.GetParent(level2); 
MessageBox.Show(level3.GetType(). ToString()); 


单 击 按钮 后 ， 弹 出 消息 框 如 图 5-4 所 示 。 














图 5-4 ”Button 控 件 的 父 级 容器 


前 面 我 们 已 经 知道 ，WPF 的 UI 是 树 形 结构 ，VisualTreeHelper 类 就 
是 帮助 我 们 在 这 标 由 可 视 化 元 素 构 成 的 树 上 进行 导航 的 辅助 类 。 我 们 洛 
着 锐 蛙 击 有 的 Button 一 层 一 层 同 上 找 ， 找 到 第 三 层 发 现 它 是 一 个 
ListBoxItem。ListBoxItem 残 是 ListBox 对 应 的 Item Container, tH yiI 
说 ， 无 论 你 把 什么 样 的 数据 集合 交 给 ListBox， 它 都 会 以 这 种 方式 进行 
Hz. PLEASE REGERE: 


«and» 
«ListBox Margin-" 3 > 
<ListBoxltem> 
«Button x:Name="buttonMess" Content="Mess"/> 
</ListBoxltem> 
<ListBoxltem> 
«Button x:Name= buttonOwen" Content=" OWen /> 
</ListBoxltem> 
<ListBoxltem> 
«Button x:Name-"buttonVictor" Content=" Victor" Cliek="button Victor_Click"/> 
</ListBoxltem> 
< ListBox> 
</Grid> 
上 面 这 个 例子 是 单纯 地 为 了 说 明 ItemsControl 能 够 使 用 对 应 的 Item 
Container 目 动 包 攻 数据。 实际 工作 中 ， 除 非 列表 里 的 元 系 目 始 全 终 者 是 
定 的 我 们 才 使 用 这 种 直接 把 UI 元 又 作为 ItemsControl 内 容 的 方法 ， 比 
如 一 年 有 十 二 个 月 、 一 周 有 七 天 等 。 大 多 数 情况 下 ，UI 上 的 列表 会 用 于 
显示 动态 的 后 台数 据 ， 这 时 候 我 们 交 给 ItemsControl 的 就 是 程序 逻辑 中 
的 数据 而 非 控 件 了。 
假设 程 厅 中 定义 有 Employee 关 : 


public class Employee 


| 
| 


public int Id | get; set; | 
public string Name | get; set; | 
public int Age | get; set; | 

ji 


并 有 旦 有 一 个 Employee 类 型 的 集合 : 


List<Employee> empList = new List=Employee>() 
| 
new Employee()/Id- 1, Name-"Tim", Age=30}, 
new Employee(){ld=2, Name= Tom", Age=26}, 
new Employee()|Id-3, Name= Guo", Age-26], 
)ild-4, Name-" Yan", Age-25], 
) 
| 


| 
人 
new Employee( 
new Employee(){ld=5, Name="Owen", Age=30}, 
new Employee(){Id=6, Name-" Victor", Age-30], 
l 
在 程序 的 主 界 面 上 有 一 个 名 为 listBoxEmplyee 的 ListBox。 我 们 只 需 
要 这 样 写 : 
ils 
this.listBoxEmplyee.DisplayMemberPath = "Name"; 
this.lis«BoxEmplyee.SelectedValuePath = "Id": 
this.listBoxEmplyee.ItemsSource = empList; 
Il ... 
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图 5-5 ”动态 后 合 数据 显示 示例 


DisplayMemberPath 这 个 属性 告诉 ListBox 显 示 每 条 数据 的 哪个 属 
性 ， 换 句 话 说 ，ListBox 会 去 调用 这 个 属性 值 的 ToString0 方 法 ， 把 得 到 
的 字符 串 放 入 一 个 TextBlock (最 简单 的 文本 控件 ) ， 然 后 再 按 前 面议 
的 办 法 把 TextBlock 包 装 进 一 个 ListBoxItem 里 。 


ListBox 的 SelectedValuePath 属 性 将 与 其 SelectedValue 属 性 配合 使 
用 。 当 你 调用 SelectedValue 属 性 时 ，ListBox 先 找到 选中 的 Item 所 对 应 的 
数据 对 象 ， 然 后 把 SelectedValuePath 的 值 当 作 数 据 对 象 的 属性 名 称 并 把 
这 个 属性 的 值 取 出 来 。 

DisplayMemberPath 和 SelectedValuePath 是 两 个 相当 人 简化 的 属性 。 
DisplayMemberPath 只 能 显示 简单 的 字符 串 ， 想 用 更 加 复杂 的 形式 显示 
数据 需要 使 用 DataTemplate， 我 们 在 后 面 的 章节 详细 讨论 ; 
SelectedValuePath 也 只 能 返回 单一 的 值 ， 如 果 想 进行 一 些 复杂 的 操作 ， 

不 妨 直 接 使 用 ListBox 的 SelectedItem 和 SelectedItems 属 性 ， 这 两 个 属性 返 
回 的 就 是 数据 集合 中 的 对 象 ， 得 到 原始 的 数据 对 象 后 束 任 由 程序 员 操 作 


Je 
理解 了 ListBox 的 目 动 包装 机 制 之 后 ， 我 把 全 部 ItemsControl 对 应 的 
Item Container 列 在 下 面 ， 如 表 5-5 所 示 。 


表 5-5 ItemsControl 对 心 的 Item Container 


temsControl 名 称 ] 对 应 的 ltem container 
ComboBox x ComboBoxltem 
ContextMenu Menultem 
ListBox | ListBoxItem 
Libo x ListViewltem 
Menu x Menultem 
StatusBar | StatusBarltem 
TabControl x Tabltem 
TreeView TreeViewltem 


5.3.4 HeaderedItemsControl* 


顾名思义 ， 本 族 探 件 除 了 有 具有 ItemsControl 的 特性 外 ， 还 具 显 示 标 
题 的 能 力 。 
AK ZG S8 RE Ea UH T: 

e JJ E H HeaderedItemsControlž$ . 
e 它们 都 是 控件 ， 用 于 显示 列表 化 的 数据 ， 同 时 可 以 显示 一 个 标 


e 内容 属性 为 Items、ItemsSource 和 Header。 
因为 与 TtemsControl 非 常 类 似 ， 在 此 整 不 浪费 笔 堆 了 了。 本 族 控 件 只 


有 3 个 : Menultem. TreeViewltem. ToolBar- 
5.3.5 “Decorator 旋 


本 族 中 的 元 系 是 在 UI 上 起 装饰 效果 的。 如 可 以 使 用 Border 元 系 为 一 
些 组 织 在 一 起 的 内 容 加 个 边框 。 如 果 需 要 组 织 在 一 起 的 内 容 能 够 目 由 缩 
放 ， 则 可 使 用 ViewBox 元 系 。 

AK ZUG S8 RE AA HH F: 

e jjj ZE Á Decorator% . 

e 起 UI 装 饰 作用 。 

e 内 容 属性 为 Child。 

e 只 能 由 单一 元 素 充 当 内 容 。 

AJ ZR Ul 5-6PTZR -o 


表 5-6 Decorator J =Z 


ButtonChrome ClassicBorderDecorator ListBoxChrome SystemDropshadowChrome 
Border [nkPresenter Viewbox 


5.3.6 TextBlock^ TextBox 





这 两 个 控件 最 主要 的 功能 是 显示 文本 。TextBlock 只 能 显示 文本 ， 
不 能 编辑 ， 所 以 又 称 静 态 文本 。TextBox 则 人 允许 用 户 编 辑 其 中 的 内 容 。 
TextBlock 虽 然 不 能 编辑 内 容 ， 但 可 以 使 用 丰富 的 印刷 级 的 格式 控制 标 
记 显 示 专 业 的 排版 效果 。 

TextBox 不 需要 太 多 的 格式 显示 ， 所 以 它 的 内 容 是 简单 的 字符 串 ， 

内 容 属 性 为 Text。 

TextBlock 由 于 需要 操纵 格式 ， 所 以 内 容 属性 是 Inlines《〈 印 刷 中 
HJ*fr") ， 同 时 ，TextBlock 也 保留 一 个 名 为 Text 的 属性 ， 当 位 单 地 显示 
一 个 字符 串 时 ， 可 以 使 用 这 个 属性 。 


5.3.7 Shape) t% 


友好 的 用 户 界 面 离 不 开 各 种 图 形 的 搭配 ，Shape 族 元 系 eda 
BA Ja us, DER 融 是 专门 用 来 在 UI 上 绘制 图 形 的 一 


Ro X25765 H lJ, RITE bA EH FillJ8 FE 7g' L] B E 76 
效果 ， 还 可 以 使 用 Stroke 属 性 为 它们 设置 边线 的 效果 。 
本 族 元 系 的 特点 如 下 : 
JYK Æ B Shape% . 
e 用 于 2D 图 形 绘制 。 
e 无 内 容 属性 。 
e 使 用 Fil 属 性 设置 坊 元 ， 使 用 Stroke 属 性 设置 边线 。 


5.3.8 Panel Jt% 


z Hr jE Panl EANA tes N NAS WESCE XN EL S 
— HA H FUM PJJ GS AST ux—JdAx. RATHEE E W a FAT 
细 研 习 数 个 重要 的 布局 元 素 。 

A) SR IRE FA HH F: 

e 均 派 生 自 Panel 抽 和 象 类 。 

e 主要 功能 是 控制 UI 布 局 。 

e 内 容 属 性 为 Children。 

e 内容 可 以 是 多 个 元 系 ，Panel 元 和 素 将 控制 它们 的 布局 。 

对 比 ItemsControl 和 Panel 元 系 ， 里 然 内 容 都 可 以 是 多 个 元 系 ， 但 
ItemsControl 强 调 以 列表 的 形式 来 展现 数据 而 Panel 则 强调 对 包含 的 元 素 
进行 布局 ， 所 以 ItemsControl 的 内 容 属性 是 Items 和 ItemsSource 而 Panel 的 
内 容 属 性 名 为 Children。WPF 框 染 中 这 种 民 好 的 命名 习惯 非常 值得 我 们 
Eee 

本 族 元 素 如 表 5-7 所 示 。 


X5-7 Pane Ju = 


Canvas DockPanel TabPanel 
ToolBarOverflowPanel StackPanel ToolBarPanel UniformGrid 












VirtualizingPanel VirtualizingStackPanel WrapPanel 


接 下 来 的 5.4 节 将 逐个 研究 这 些 布局 元 素 。 
54 UI (Layout) 
WPF 作 为 专门 的 用 户 界 面 技 术 ， 布 局 功能 是 它 的 核心 功能 之 一 。 友 


好 的 用 户 界 面 和 民 好 的 用 户 体 验 离 不 开设 计 精 民 的 布局 。 日 党 工作 中 ， 
WPF 设 计 师 工作 量 最 大 的 两 部 分 就 是 布局 和 动画 ，| 除 了 点 级 性 的 动画 


外 ， 大 部 分 动画 也 是 布局 间 的 转换 ，UI 布 局 的 重要 性 可 见 一 斑 。 布 局 是 
静态 的 ， 动 画 是 动态 的 ， 用 户 体验 就 是 用 户 在 这 动静 之 中 与 软件 功能 产 
生 交 互 时 的 感受 。 
注意 

WPE 的 布局 是 依靠 各 种 布局 元 素 实现 的 。 布 局 元 素 中 ， 既 有 像 传统 的 Windows ” Form 和 
ASP.NET 那 样 使 用 绝对 坐标 进行 定位 的 元 素 ， 也 有 像 HITML 页 面 中 那样 使 用 行列 定位 的 元 素 。 
2 Ip 局 元 素 了 如 指 掌 才能 使 用 最 简洁 的 XAML 和 C# 代 码 实 现 让 用 户 赏 心 悦 目 的 静态 界 

H2JJ 1H] 。 


在 开始 学 习 这 些 布局 元 素 前 ， 首 先 提 醒 大 家 一 句 : 每 个 布局 元 素 都 
有 自己 的 特点 ， 即 有 自己 的 优点 、 长 处 ， 也 有 自己 的 缺点 和 短处 。 大 家 
一 定 要 把 每 个 元 素 的 特点 记 清 楚 并 灵活 使 用 ， 切 葛 对 每 种 布局 控件 都 无 
所 不 用 其 极 。 选 择 合 适 的 布局 元 素 ， 将 会 极 大 地 简化 编程 ， 反 之 将 会 被 
人 迫 实 现 一 些 布 局 控件 原本 已 有 的 功能 。 另 外 ， 设 计 静 态 布 局 的 时 候 也 不 
能 一 味 地 追求 简单 ， 如 果 各 静态 布局 间 还 有 动 男 作为 联系 ， 就 还 需要 考 
虑 与 动 男 设计 的 兼容 性 。 


5.4.1 布局 元 素 


传统 的 Windows Form 或 ASP.NET 开 发 中 ， 一 般 是 把 窗 体 或 页 面 当 
作 一 个 以 左上 角 为 原点 的 坐标 系 。 窗 体 或 页 面 上 的 控件 依靠 这 个 坐标 系 
来 布局 ， 布 局 的 办 法 就 是 调整 控件 在 这 个 坐标 系 中 的 模 纵 坐标 值 。 这 样 
一 来 ， 控 件 与 控件 之 间 的 关系 要 么 束 古 相 邻 要 么 就 是 车 压 。 

WPF 的 控件 有 了 Content 的 概念 ， 所 以 控件 与 控件 之 间 又 多 出 一 种 
关系 包含 。 也 正 是 这 种 以 窗 体 为 根 的 包含 关系 ， 整 个 WPF 的 UI 才 形 
成 树 形 结 构 ， 我 们 称 之 为 可 视 化 树 (Visual Tree) ， 如 图 5-6 所 示 。 











图 5-6 可视化 树 


这 是 几 个 拨 在 一 起 的 Button。 当 看 到 这 张 图 时 ，Windows Form 程 序 
员 会 想到 把 几 个 Button 登 加 在 一 起 ， 而 WPF 程 序 员 除了 可 以 使 用 与 
Windows Form 程 序 员 一 样 的 办 法 外 还 多 了 一 个 选择 一 一 把 一 个 Button 作 
为 另 一 个 Button 的 Content。 人 代码 如 下 : 


«Grid? 
z Button MargIn= 10^» 
«Button Margin-" 10^» 
«Button Margin" 10" 
«Button Margin-" 10" 
«Button Margin-" 10" Content- OK "/» 
</Button> 
</Button> 
</Button> 
</Button> 


«rid» 


但 WPF 程 序 员 会 遇 到 这 样 一 个 问题 : 用 于 构成 UI 的 重要 控件 ， 如 
Window、UserControl、GroupBox、Button、Label 等 ， 都 集中 在 
ContentControl 和 HeaderedContentControl 族 里 ， 但 这 两 族 控 件 只 能 接受 
一 个 元 系 作 为 日 己 的 Content， 如 果 想 在 这 些 控 件 里 包含 多 个 控件 应 该 怎 
么 做 昵 ? 这 克 要 用 到 布局 元 系 了。 布局 元 系 属 于 Panel 找 ， 这 一 族 元 系 
的 内 容 属性 是 Children， 即 可 以 接受 多 个 控件 作为 自己 的 内 容 并 对 这 些 


Ti EET fnis. WPF J EAS ose U — T 4B 8)763A TE 7J 
ContentControl 或 HeaderedContentControl 族 控件 的 Content， 册 在 布局 元 
又 里 谎 加 要 被 布局 的 子 级 控件 ， 如 各 UI 局 部 需要 更 复杂 的 布局 ， 那 融 在 
这 个 区 域 放置 一 个 子 级 的 布局 元 陛 ， 形 成 布局 元 又 的 般 父 。 

e Grid: 网 格 。 可 以 目 定 义 行 和 列 并 通过 行列 的 数量 、 行 高 和 列 
宽 来 调整 控件 的 布局 。 近 似 于 HTML 中 的 Table。 

e StackPanel: 栈 却 面板 。 可 将 包含 的 元 素 在 紧 直 或 水 平方 同上 排 
< 当 移 除 一 个 元 系 后 ， 后 面 的 元 素 会 目 动 回 前 移动 以 填充 空 


e Canvas: 田 布 。 内 部 元 系 可 以 使 用 以 像 系 为 日 位 的 绝对 坐标 进 
行 定 位 ， 类 似 于 Windows Form 编 程 的 布局 方式 。 

e DockPanel: 泊 徘 式 面 板 。 内 部 元 系 可 以 选择 泊 菲 方 同 ， 类 似 于 
fEWindows Form 编 程 中 设置 控件 的 Dock 属 性 。 

e WrapPanel: 目 动 折 行 面板 。 内 部 元 和 际 在 排 满 一 行 后 能 鹃 目 动 打 
行 ， 类 似 于 HTMEL 中 的 流 式 布局 。 

下 面 我 们 残 逐 个 研究 一 下 它们 的 使 用 方法 。 


5.4.2 Grid 


顾名思义 ，Grid 元 系 会 以 网 格 的 形式 对 内 容 元 素 们 《〈 即 它 的 
Children ) 进行 布局 。 

Grid 的 特点 如 下 : 

e uJUEXTERAÀUCEBRJTI AI, JE RIA o 

e 行 的 高 度 和 列 的 宽度 可 以 使 用 绝对 数值 、 相 对 比例 或 自动 调整 
的 方式 进行 精确 设 定 ， 并 可 设置 最 大 和 最 小 值 。 

e 内 部 元 系 可 以 设置 目 己 的 所 在 的 行 和 列 ， 还 可 以 设置 目 己 纵 回 
跨 儿 行 、 模 同 跨 几 列 。 

e 可 以 设置 Children 元 素 的 对 齐 方向 。 

基于 这 些 特 点 ，Grid 适 用 的 场合 有 : 
UI 布局 的 大 框 染 设计 。 
大 量 UI 元 系 需 要 成 行 或 者 成 列 对 草 的 情况 。 
UI 整体 尺寸 改变 时 ， 元 系 需 要 你 持 回 有 的 蜗 上 度 和 宽度 比例 。 
UI 后 期 可 能 有 较 大 变更 或 扩展 。 

1. 定义 Grid 的 行 与 列 

Grid 类 具有 ColumnDefinitions 和 RowDefinitions 两 个 属性 ， 它 们 分 别 
是 ColumnDefinition 和 RowDefinition 的 集合 ， 表 示 Grid 定 义 了 多 少 列 、 多 


Jer. PA F É HYRAS: 


<Grid> 
<Grid.ColumnDefinitions> 
<ColumnDefinition/> 
<ColumnDefinition/> 
«ColumnDefinition/ 
«ColumnDefinition/? 
«Gnd. ColumnDefinitions? 
«Grid. RowDefinitions? 
«RowDefinition/? 
zRowDefinition/* 
zRowDefinition/ 
</Grid.RowDefinitions> 
</Grid> 
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图 5-7 Grid 元 素 示 例 


Visual Studio 为 我 们 准备 了 非常 实用 的 XAML 设 计 右 ， 当 你 把 女 标 
针 在 Grid 有 的 边缘 上 移动 时 会 出 现 一 条 提示 线 ， 一 旦 你 早 击 鼠标 则 会 在 
此 添加 一 条 分 隔 线 、 创 建 出 新 的 行 和 列 。 在 实际 工作 中 ， 我 们 可 以 先 在 
XAML 设 计 器 里 粗略 地 划分 好 行 和 列 然 后 回 到 XAML 编 辑 器 里 通过 修改 
代码 进行 精确 调整 。 

如 有 末 需 要 动态 地 调整 Grid 的 布局 ， 可 以 在 C# 完 成 对 列 和 行 的 定义 。 
假设 窗 体 包 侣 一 个 名 为 gridMain 的 Grid 元 北 ， 我 为 这 个 窗 体 的 Loaded 事 
件 准备 了 如 下 的 处 理 需 : 


private void Window Loaded(object sender, RoutedEventArgs e) 
| 

/! Add 4 columns 

this.gridMain. ColumnDefinitions.Add(new ColumnDefinition()); 
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition()); 
| 
| 


() 
() 
this.gnidMain.ColumnDefinitions. Add(new ColumnDefinition() 
this.eridMain.ColumnDefinitions. Add(new ColumnDefinition()): 


1 


// Add 3 rows 

this.gridMain. RowDefinitions.Add(new RowDefinition()); 
this.gridMain.RowDefinitions.Add(new RowDefinition()); 
this.gridMain. RowDefinitions.Add(new RowDefinition()); 


|| Show grid line in runtime 


this.gridMain.ShowGridLines = true; 


则 程序 运行 后 显示 的 效 来 如 图 5-8 所 示 。 


| B' Windowl 





图 5-8 动态 调整 Grid 布局 示例 


只 定义 行 和 列 的 个 数 还 远 远 不 够 ， 我 们 还 需要 设置 行 的 高 度 和 列 的 
宽度 才能 形成 有 意义 的 布局 。 这 束 引 出 两 个 问题 : 

e JER 2 J SB r ze TZ -o 

e E A J u PHAT Z Fe HJ É < 

先 来 回答 第 一 个 问题 。 计 算 机 图 形 设计 的 标准 单位 是 像素 
(Pixel) ， 所 以 Grid 的 宽度 和 融 度 单位 就 是 像 系 。 除 了 可 以 使 用 像 系 作 
为 单位 外 ，Grid 还 接受 英寸 (Inch) 、 厘 米 (Centimeter) 和 点 (Point) 
作为 单位 ， 这 些 单 位 如 表 5-8 所 示 。 
表 5-8 Grid 可 接受 的 宽度 和 高 度 的 单位 


Pixel x (AWAY, TAR) 图 形 基本 单位 


Centimeter lem=(96/2.54)pixel 


用 一 段 代码 把 所 有 单位 都 展示 出 来 : 











«ond» 
<Grid.RowDefinitions> 
<RowDefinition Height="30px"/> 
<RowDefinition Height="30"/> 
<RowDefinition Height="0.5in"/> 
<RowDefinition Helght= 1cm /> 
<RowDefinition Helght= 3Upt /> 
«/Gnd.RowDefinitions? 
«Gnd» 
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图 5-9 不 同 的 长 度 单 位 


注意 
点 值得 注意 的 地 方 : 
属性 的 值 为 double 类 型 。 
e 因为 像素 是 默认 单位 ， 所 以 px 可 以 省 略 。 
e 其 他 单位 也 会 被 转换 成 像素 并 显示 在 Grid 的 边缘 处 。 


实际 工作 中 使 用 什么 单位 要 看 程序 具体 的 功能 ， 如 果 UI 只 用 于 显示 
在 计算 机 屏幕 上 ， 那 么 像素 单位 最 为 合适 ;如 果 程 序 涉 及 打印 输出 ， 则 
公制 单位 选择 厘米 、 瑞 制 单 位 使 用 磋 寸 比较 合适 。 
ua CONNU T NUES EAE EE 
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e 绝对 值 : double 数 值 加 单位 后 缀 Cn EI». 


e 比例 值 : double24# Ja Ji E (2) 。 

e BJE: T Auto. 

有 前面 的 例子 我 们 使 用 的 就 是 绝对 值 。 绝 对 值 的 特点 是 一 经 设 定 束 不 
会 再 改 变 ， 所 以 又 称 回 定 值 。 当 控件 的 宽度 和 高 度 不 需要 改变 或 者 使 用 
衬 行 、 衬 列 作为 控件 间隔 时 ， 绝 对 值 是 不 二 之 选 。 

比例 值 是 在 double 类 型 数据 后 加 一 个 星 写 《“*”) 。 解 析 如 会 把 所 有 
比例 值 的 数值 加 起 来 作为 分 母 、 把 每 个 比例 值 的 数值 作为 分 子 ， 再 用 这 
个 分 数值 乘 以 未 被 占用 空间 的 像素 数 ， 得 到 的 结果 就 是 分 配给 这 个 比例 
值 的 最 终 像 了 系数 。 比 如 一 个 总 高 度 为 150px 的 Grid， 它 包含 5 行 ， 其 中 两 
行 玉 用 绝对 值 25px， 其 他 三 行 分 别 是 2*、1*、2*， 使 用 上 面 的 计算 方 
法 ， 这 三 行 分 配 的 像素 数 应 该 是 40pX、20px 和 40px。 

比例 值 最 大 的 特点 是 当 UI 的 整体 尺寸 改变 后 ， 它 会 保持 固有 的 比 
例 。 如 下 面 这 段 代 码 所 示 : 


«Grid ShowGndLines= "True "> 
<Grid.RowDefinitions> 
<RowDefinition Height="25"/> 
<RowDefinition Height="4"/> 
<RowDefinition Height="1*"/> 
<RowDefinition Height="*"/> 
<RowDefinition > 
</Grid.RowDefinitions> 
</Grid> 


程序 局 动 时 你 看 到 的 UI 如 图 5-10 所 示 。 
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图 5-10 ”程序 局 动 时 显示 效果 
当 你 改变 窗 体 的 尺寸 后 ， 它 会 变 成 如 图 5-11 所 示 。 


E” Window1 























图 5-11 ”改变 窗 体 尺寸 后 的 显示 效果 


从 上 面 的 变化 中 我 们 可 以 看 出 ， 当 改变 容器 的 尺寸 时 ， 使 用 绝对 值 
的 行 高 不 会 改变 而 使 用 比例 值 的 行 高 会 保持 固有 比例 。 而 且 ， 行 高 和 列 
宽 的 默认 形式 惑 是 比例 值 ， 所 以 如 果 没 有 显 式 指定 行 遍 或 列 宽 时 ， 默 认 
值 就 是 1*，1* 又 可 以 简写 为 *。 

如 果 你 使 用 自动 值 (字符 串 “Auto”) 为 行 高 或 列 宽 赋 值 ， 那 么 行 高 
或 列 宽 的 实际 值 将 由 行列 内 控件 的 高 度 和 宽度 决定， 通俗 点 讲 束 是 控件 
A NUMEN IULIUS 
T 353] 7JO. 

接 下 来 让 我 们 看 看 如 何 使 用 这 三 种 值 为 Grid 定义 行列 和 布局 控件 。 

2， 使 用 Grid 进行 布局 

让 我 们 通过 一 个 实例 来 学 习 用 Grid 布 局 。 下 面 两 张 图 是 设计 师 交 给 
程序 员 的 UI 设计 图 ， 如 图 5-12 所 示 的 图 是 用 于 XAML 编 程 的 ， 如 图 5-13 
和 图 5-14 所 示 的 图 是 期 组 效 果 。 


400px 


根据 内 容 目 动 调整 


240px 
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图 5-13 期望 效 果 一 


请 选择 您 的 部 门 并 鲁 午 | 





图 5-14 ”期 望 效果 二 
在 开始 使 用 Grid 实 现 上 面 的 设计 之 前 ， 我 先 说 一 个 初学 者 常见 的 错 


小 用 Margin。Margin 即 留 白 ， 指 可 视 化 元 素 四 周 距离 其 容 吉 的 距 
离 。 很 多 从 Windows Form 和 ASP.NET 迁 移 到 WPF 来 的 程序 员 在 了 解 Grid 
之 前 都 喜欢 用 设 定 控件 高 度 、 宽 度 和 Margin 的 方式 进行 布局 。 对 于 简单 
的 布局 ，Height 十 Width 十 Margin 的 方式 疝 能 应 付 ， 但 对 于 结构 复杂 的 布 
局 这 种 方式 了 驶 吧 不 消 了 。 人 代码 中 满 饥 都 是 对 Height、Width、Margin 以 及 
对 齐 方 同 的 设置 ， 不 光 证 起 来 费劲 ， 而 且 有 时 一 个 小 小 改动 都 可 能 导致 
大 量 的 代码 修改 《比如 为 了 保证 多 个 控件 在 行 或 列 上 的 对 齐 以 及 周边 党 
到 影响 的 控件 ) 甚至 导致 整个 UI 布 局 的 骨 泪 ， 着 实 令 人 抓 狂 。 
拿 上 面 这 个 设计 来 说 ， 如 果 使 用 Height 十 Width 十 Margin 的 方式 来 设 
计 ， 代 人 码 会 是 这 样 : 





«Window x:Class-"WpfApplication2. Window] " 
xmlns- "http://schemas.microsoft.com/winfx/2006/xaml/ presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=" d R C" Height-"240" Width-"400" 
«Gnd» 
<TextBlock Text-" ii E E FB: "— Margin" 10,10,0,0" Height-"25" Width-" 40" VerticalAlignment- 
"Top" Horizontal Alignment-" Left" /> 
<ComboBox Height-25" Width-"210" VerticalAlignment-" Top"  Margin-"0,10,10,0"  HorizontalAlignment- 
"Right"/5 
<TextBox BorderBrush-" Black" Margin-" 10,40, 10,40" > 
«Button Content-" jt ^£ " Height-"25" Width-"80" VerticalAlignment-"Bottom" HorizontalAlignment-" Right" 
Margin="0,0,96,10" /> 
«Button Content-" jj [& "  Height="25" Width-"80" HorizontalAlignment-"Right" Marpin-"0,0,10, 10" 
VerticalAlignment-" Bottom" /> 
</Grid> 


«Window» 


这 样 的 代码 ， 简 直 称 得 上 是 凌乱 不 堪 的 典范 ! 更 重要 的 是 ， 它 没 能 
忠实 地 重 现 设计 师 的 需求 一 一 要求 静态 文本 的 宽度 由 内 容 雇 定 。 这 就 意 
味 看 ， 如 果 有 一 天 这 个 程序 进行 国际 化 修改 时 ， 这 里 不 是 出 现 字 人 符 串 被 
规 断 就 是 留 下 大 量 空白 。 进 而 ， 如 有 果 设 计 师 要 求 把 控件 距离 窗 体 的 距离 
由 原来 的 10px 修 改 为 122px， 则 几乎 所 有 控件 的 Height、Width 和 Margin 者 
需要 修改 。 夺 是 在 程序 员 完 成 修改 ， 设 计 师 感 沈 还 是 10px 比 较 好 、 要 求 
再 改 回去 ， 估 计 一 场 邮件 大 战 在 所 难免 。 

正确 的 办 法 是 使 用 Grid 来 进行 布局 : 


«Window x:Class="WpfApplicationl Window" 
xmlns-"http://schemas.microsofl.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=" 留 言 板 " Height-" 240" Width-"400"» 

«Grid Margin="10"> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width" Auto" MinWidth="120" /> 
<ColumnDefinition Width-"*" /> 
<ColumnDefinition Width="80" /> 
<ColumnDefinition Width="4" /> 
<ColumnDefinition Width="80" /> 
</Grid.ColumnDefinitions> 
<Grid.RowDefinitions> 
<RowDefinition Height="25" /> 
<RowDefinition Height="4" /= 
<RowDefinition Height="*" /> 
<RowDefinition Height-"4" /> 
<RowDefinition Height="25" /> 
</Grid.RowDefinitions> 
</Grid> 
</Window> 
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图 5-15 ”用 Grid 的 行 、 列 来 布局 控件 


在 代码 中 ， 我 们 使 用 Width="Auto" 保 证 这 一 列 的 宽度 由 控件 的 最 大 
宽度 决定 ， 同 时 使 用 MinWidth="120" 保 证 这 一 列 最 罕 不 会 小 于 
120px (目的 是 在 设计 期 看 到 这 一 列 的 存在 ) 。 使 用 比例 值 的 行 和 列 确 
保 此 行 和 列 中 的 控件 会 把 剩余 空间 充满 。 把 Grid 的 Margin 议 计 为 10， 巧 
味 着 它 四 周 的 Margin 都 为 10px， 相 当 于 写 Margin="10,10,10,10" 
Margin 扒 4 个 值 控 顺 时 针 代 表 左 、 上 、 右 、 下 4 个 留 日 。 

最 后 ， 我 们 把 控件 填 进 去 ， 同 时 为 了 保证 布局 美观 ， 限 定 窗 体 的 高 
FERE BE YO ES]: 





«Window x:Class-" WpfApplication] Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-" http;//schemas.microsoft.com/winfx/2006/xaml" 
Title=" H R t" Height-"240" Width "400" 

MinHeight-" 200" MinWidth-" 340" MaxHeight-"400" Max Width-" 600" 
«Grid Margin-" 10" 

«Grid. ColumnDefinitions? 
«ColumnDefinition Width= Auto"/> 
«ColumnDefinition Width-"*" /> 
«ColumnDefinition Width" 80" /> 
«ColumnDefinition Width-"4" /> 
«ColumnDefinition Width= 80" /> 

«fand. ColumnDefinitiong 

«Grid. RowDefinitions? 
<RowDefinition Height-"25" /> 
<RowDefinition Height-"4" /> 
<RowDefinition Height-" *" /> 
<RowDefinition Height" 4" /> 
<RowDefinition Height-"25" /> 

</Grid.RowDefinitions> 


<TextBlock Text=" 请 选择 您 的 部 门 并 留言 ，" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/> 
<ComboBox Grid.Column-" |" Grid.Row-" 0" Grid.ColumnSpan-"4"/7 
«TextBox Grid.Column-"0" Grid. Row-"2" Grid.ColumnSpan-" 5" BorderBrush-"Black"/ 
«Button Content-" Jit ^2" Grid.Column-"2" Grid. Row-"4"/» 
«Button Content- 595" Grid.Column-"4" Grid.Row-"4"/» 
</Grid> 
«Window? 
注意 
为 控件 指定 行 和 列 遵循 以 下 规则 : 
e 行 和 列 都 是 从 0 开始 计数 。 i o | 
e 指定 一 个 控件 在 菏 行 ， 束 为 这 个 控件 的 标签 添加 Grid.Row=" 行 编写 "这 样 一 个 
Attribute， 知 行 编号 为 0〈 即 控件 处 于 首 行 ) 则 可 省 略 这 个 Attribute。 
e 指定 一 个 控件 在 某 列 ， 就 为 此 控件 添加 Grid.Column=" 列 编号 "这 样 的 Attribute， 若 列 编 
号 为 0 则 Attribute 可 以 省 略 不 写 。 
e 和 若 控 件 需要 路 多 个 行 或 列 ， 请 使 用 Grid.RowSpan=" 行 数 " 和 Grid.ColumnSpan=" 列 数 "两 


个 Attribute。 


你 可 能 会 间 ， 为 什么 给 控件 指定 行 和 列 要 使 用 Grid.Row 和 和 
Grid.Column 而 不 是 Button.Row 或 者 TextBox.Column 呢 ? 其 实 这 个 问题 很 
简单 。 假 使 我 们 从 街 上 随便 拉 住 一 个 人 问 : “您 是 在 几 年 级 几 班 啊 ? "这 
个 人 肯定 会 非常 惊讶 “我 又 没有 在 学 校 里 读书 ， 怎 么 可 能 有 年 级 和 玉 
级 呢 ? ”。 对 于 控件 也 是 这 样 ， 控 件 设计 出 来 的 时 候 并 没有 规定 它 一 定 
要 放 和 在 Grid 里 ， 所 以 不 可 能 为 它 准备 诺 如 Row、Column、RowSpan 和 
ColumnSpan 这 基 的 属性 ， 只 有 有 当 所 和 伞 放 到 Grid 时 时 识 它 位 于 哪 一 行 、 哪 
一 列 才 有 意义 的 ， tB Le Dus XX LE fe P A Je TF Pr i A B ft] e d Grid P 
WME. x38 4 d EE Pr BEA SI 4 2 E JUL IJ EAE 7T I A F 
一 一 附加 属性 ， 我 们 将 在 后 面 的 章节 评 细 讨论 。 在 明白 附加 属性 的 原理 
之 前 ， 学 会 使 用 它们 即 可 。 
注意 

(1) 实现 设计 师 的 UI 草图 不 见得 只 有 一 种 布局 方法 一 一 拿 上 面 这 个 例子 来 说 ， 我 们 完全 
可 以 先 使 用 一 个 Grid 把 整个 UI 分 为 上 、 中 、 下 三 部 分 ， 然 后 再 在 上 下 两 个 部 分 内 能 入 子 级 
Grid， 但 这 样 做 不 但 使 代码 量 增 大 ， 而 且 让 结构 变 得 更 加 复杂 和 不 清晰 ， 很 影响 阅读 。 上 所 以 ， 
评价 一 个 布局 的 优 务 不 但 要 看 它 的 结构 是 否 合理 ， 还 要 考虑 与 代码 质量 的 平衡 性 。 

(2) 如 果 把 两 个 元 素 放 在 Grid 的 同一 个 单元 格 内 ， 则 代码 中 后 书写 的 元 素 将 新 在 先 书 写 
的 元 票 之 上 。 如 果 想 让 新 在 后 面 的 元 和 素 显 示 出 来 ， 可 以 把 上 面 元 妈 的 Visibility 设 置 为 Hidden 或 
Collapsed， 也 可 以 把 上 面 元 系 的 Opacity 属 性 设置 为 0。 





5.4.3 StackPanel 
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动 、 补 占 原 有 元 素 的 空间 。 基 于 这 个 特点 ，StackPanel 适 合 的 场合 有 : 

e 同类 元 素 需 要 紧 凌 排列 〈 如 制作 沈 单 或 者 列表 ) 。 

e 移 除 其 中 的 元 系 后 能 够 目 动 补缺 的 布局 或 者 动 转 。 

StackPanel 使 用 3 个 属性 来 控制 内 部 元 对 的 布局 ， 它 们 是 
Orientation、HorizontalAlignment 和 VerticalAlignment， 上 有 具体 如 表 5-9 所 
Z]S ° 

表 5-9 StackPanel 的 三 个 属性 


FF 


属性 名 称 数据 类 型 可 取 值 i 






A — Horizontal 决定 内 部 元 素 是 横向 累积 还 
Orientation Orientation #1% umn 
Ve rtical A 纵 | ] E E 


Left 
A p m 决定 内 部 元 素 水 平方 向 上 的 
HorizontalAlignment | HorizontalAlignment FÉ an as | 
Rieht MTN 


Stretch 


Top 


Center 决定 内 部 元 素 竖 直方 向 上 的 
Bottom 对 齐 方式 


VerticalAlignment Vertical Alignment 17$ 


Stretch 
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不 可 蔡 代 的 优势 。 淮 个 例子 : 如 果 我 需要 一 个 采 早 ， 这 个 采 早 里 的 每 个 
条 目 被单 击 后 束 会 脱离 原来 的 位 置 并 在 主 显示 区 域 展开 成 一 张 地 图 ， 其 
他 排 在 它 后 面 的 条 目 会 目 动 癌 前 移动 、 补 占 原 来 条 目的 位 置 ， 这 时 候 惑 
应 该 选用 StackPanel。 因 为 StackPanel 会 自动 把 后 面 的 条 目 问 前 移动 而 无 
需 我 们 上 自己 动手 写 代 码 。 如 果 你 选用 了 Grid， 那 么 你 束 需 要 写 一 个 算法 
把 后 面 的 条 目 问 前 移动 。 

下 面 这 个 例子 就 是 一 个 使 用 StackPanel 布 局 的 选项 表 ， 比 起 使 用 
Grid 它 要 人 简单 得 多 。 


«Window x:Class=" WpfApplicationl.Windowl1" 

xmlns="http:/ischemas.microsotft.com/ winfx/2000/xaml/presentation" 

xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title=" X: JE Bi" Heipht-" 190" Width-"300" 

«Grid» 

«GroupBox Header=" 请 选择 没有 错别字 的 成 语 " BorderBrush-" Black" Margin="5"> 
<StackPanel Margin="5"> 
<CheckBox Content-"A, XL zi Eri» 
«CheckBox Content-"B. BH —J8B"> 
«CheckBox Content="C, Wiin k"> 
«CheckBox Content-"D.. x8 A" 
«CheckBox Content="E， 4» n] 4i" 
xStackPanel Orientation-" Horizontal" Horizontal Alignment-" Right" 
«Button Content-" 15 7" Width-"60" Margin-"5"/» 
«Button Content-" [f xz" Width-"60" Margin-"5"/» 
</StackPanel> 
</StackPanel> 
</GroupBox> 
</Grid> 
</Window> 


运行 效果 如 图 5-16 所 示 。 


| 下 1 Xm 
请 选择 尝 有 错 别 字 的 成 语 
回 A 追 不 急 竺 
| B. 首 曲 一 指 


J| D. BARS, 


上 
L] E. 不 可 礼 阶 

















图 5-16 ”使 用 StackPanel 布 局 的 选项 表 


实际 工作 中 ， 我 们 可 以 使 用 Orientation、HorizontalAlignment 和 
VerticalAlignment 三 个 属性 组 合 出 各 种 排列 和 对 齐 方式 。 


5.4.4 Canvas 


Canvasiž Xp X pla 4g", EAA, fECanvas Hif FJ pl A cc IB E 
男 控 件 一 样 。 使 用 Canvas 布 局 与 在 Windows Form 窗 体 上 布局 基本 上 是 一 
样 的 ， 只 是 在 Windows Form 开 及 时 我 们 通过 议 置 控件 的 Left 和 Top 等 属 
性 来 确定 控件 在 窗 体 上 的 位 置 ， 而 WPF 的 控件 没有 Left 和 Top 等 属性 ， 
束 像 把 控件 放 在 Grid 里 时 会 说 附加 上 Grid.Column 和 Grid.Row 属 性 一 样 ， 
当 控 件 人 被 放置 在 Canvas 里 时 束 会 被 附加 上 Canvas.X 和 Canvas.Y 属 性 。 

Canvas 很 容易 被 从 Windows Form 迁 移 过 来 的 程序 员 所 小 用， 实际 上 
大 多 数 时 候 我 们 都 可 以 使 用 Grid 或 StackPanel 等 布局 元 附 产 生 更 简洁 的 
布局 。Canvas 适 用 的 场合 包括 : 

e 一 经 设计 基本 上 不 会 再 有 改动 的 小 型 布局 〈 如 图 标 ) 。 

e 艺术 性 比较 强 的 布局 。 

e 需要 大 量 使 用 模 纵 坐标 进行 绝对 点 定位 的 布局 。 

e 依赖 于 模 纵 坐标 的 动画 。 

下 面 的 代码 是 一 个 使 用 Canvas 代 符 Grid 讽 计 的 登录 和 窗口， 除非 你 确 
定 这 个 窗口 的 布局 以 后 不 会 改变 而 且 窗 体 尺 寸 固定 ， 不 然 还 是 用 Grid 进 
行 布 局 弹性 会 更 好 。 


«Window x:Class-" WpfApplication] Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title=" 3" Height-" 140" Width="300"> 

«Canvas? 
<TextBlock Text=" 用 户 名 ; " Canvas.Left-" 12" Canvas. Top="12"/> 
«TextBox Height-"23" Width="200" BorderBrush-" Black" Canvas.Left-" 66" Canvas. Top="9" /> 
<TextBlock Text-" 585: " Canvas, Left-" 12" Canvas. Top-" 40.72" Height-" 16" Width-"36" /> 
«TextBox Height-"23" | Width-"200" BorderBrush-"Black" Canvas.Left-"66" Canvas. Top-"38" /> 
«Button Content-" ff sé" Width-"80" Height-"22" Canvas.Left-" 100" Canvas. Top-"67" /> 
«Button Content" 9e" Width-"80" Height-"22" Canvas.Left-" 186" Canvas. Top-"67" /> 

«/ Canvas» 


«Window? 


运行 效 玉 如 图 5-17 所 示 。 








图 5-17 使 用 Canvas 设 计 的 登录 窗口 


最 后 ， 与 Grid 一 样 ， 如 果 两 个 元 际 在 Canvas 内 部 占据 相同 的 位 置 ， 
亦 是 代 人 码 中 后 书写 的 元 素 会 入 新 在 先 书写 的 元 系 之 上 。 想 要 显露 亩 在 下 
pm 可 以 在 代码 中 修改 上 面 元 素 的 Visibility 属 性 值 或 Opacity 属 性 


5.4.5 DockPanel 


DockPanel 内 的 元 素 会 被 附加 上 DockPanel.Dock 这 个 属性 ， 这 个 属性 
的 数据 类 型 为 Dock 枚 举 。Dock 枚 举 可 取 Left、Top、Right 和 Bottom 四 个 
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DockPanel 还 有 一 个 重要 属性 bool 类 型 的 LastChildFill， 它 的 默 
认 值 是 True。 当 LastChildFill 属 性 的 值 为 True 时 ，DockPanel 内 最 后 一 个 
元 系 的 DockPanel.Dock 属 性 值 会 被 忽略 ， 这 个 元 兹 会 把 DockPanel 内 部 所 
守 间 充满 。 这 也 正好 解释 了 为 什么 Dock 枚 誉 类 型 没有 Fi 这 个 





下 面 是 一 个 DockPanel 的 简单 示例 : 
«Window x:Class-"WpfApplication] Window" 


xmlns-"http://schemas.microsoft.com/ winfx/2006/xaml/presentation" 
xmlIns:x-" http://schemas.microsofl.com/winfx/2006/xaml" 
Title-"Window" Height-" 300" Width-" 400" 
«Gnd» 
<DockPanel> 
<TextBox DockPanel.Dock=" Top" Height-"25" BorderBrush-" Black"? 
«TextBox DockPanel.Dock-"Left" Width-" 150" BorderBrush-"Black"/» 
«TextBox BorderBrush-" Black /> 
</DockPanel> 
«ond» 
</Window> 
它 的 运行 效果 如 图 5-18 所 示 。 


| 2^ Windowl 














图 5-18 ”DockPanel 布 局 示例 


看 到 这 个 效果 图 ， 很 自然 让 人 想到 能 不 能 在 下 部 两 个 TextBox 之 间 
加 上 一 个 可 拖 搜 的 分 隅 栏 ， 让 有 用户 能 调整 TextBox 的 宽度 。 可 异 ， 
DockPanel 不 具备 这 样 的 功能 ， 我 们 只 能 使 用 Grid 和 GridSplitter 来 实现 这 
ME ( GridSplitterz: Æ Grid 4] 48 1x PL JT ru pk |) 。 下 面 是 实现 
RAH: 


«Window x:Class="WpfApplication 1. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins;x-" http;//schemas.microsoft.com/winfx/2006/xaml" 
Title- Windowl Height" 300" Width-" 400" 

«and? 
«Grid. RowDefinitions? 
<RowDefinition Height="25"/> 
<RowDefinition/> 
<Jürid.RowDefinitions> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="150" /> 
<ColumnDefinition Width" Auto"/> 
<ColumnDefinition /> 
<ürid.ColumnDefinitions> 
<TextBox Grid.ColumnSpan- "5" BorderBrush="Black"/> 
<TextBox Grid.Row="1" BorderBrush="Black"/> 
<GridSplitter Grid.Row="1" Grid.Columnz" 1" 
VerticalAlignment=" Stretch" 
HorizontalAlignment=" Center" 
Width="5" 
Backgroundz "Gray" 
ShowsPreviewz" True" /» 
«TextBox Grid. Row-" I" Grid.Column-"2" BorderBrush= Black > 
«6nd» 
«Window» 


运行 结束 如 图 5-19 所 示 。 








54.6 WrapPanel 


WrapPanel 内 部 采用 的 是 流 式 布局 。WrapPanel 使 用 Orientation 属 性 
来 控制 流 延 伸 的 方向 ， 使 用 HorizontalAlignment 和 VerticalAlignment 两 个 
属性 控制 内 部 控件 的 对 齐 。 在 流 延 伸 的 方向 上 ，WrapPanel 会 排列 尽 可 
能 多 的 控件 ， 排 不 下 的 控件 将 会 新 起 一 行 或 一 列 继续 排列 。 

下 面 是 一 个 简单 的 例子 : 


«Window x:Class-"WpfApplication] Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http;//schemas.microsoft.com/wintx/2006/xaml" 
Title=" Window]" Height-"300" Width-"400"» 
<WrapPanel> 

«Button Width="50" Height="50" Content="OK"/> 
«Button Width="50" Height="50" Content="0K"/> 
«Button Width="50" Height="50" Content-" OK"/^ 
«Button Width-" 50" Height" 50" Content-" OK"/^ 
«Button Width- "50" Height-" 50" Content="OK"/> 
«Button Width-" 50" Height" 50" Content-" OK"/^ 
«Button Width-"50" Height-" 50" Content-"OK"/^ 
«Button Width-"50" Height-" 50" Content="OK "> 
«Button Width-" 50" Height-" 50" Content-" OK"/^ 
</WrapPanel> 
</Window> 


改变 究 体 的 尺寸 ，WrapPanel 会 调整 内 部 控件 的 排列 ， 如 图 5-20 所 
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图 5-20 ”WrapPanel 布 局 示例 


55 ”小 结 


形 而 上 者 谓 之 道 ， 形 而 下 者 谓 之 器 。 这 本 书 主 要 研究 的 是 WPF 的 内 
部 机 理 ， 可 以 说 是 WPF 之 “ 道 >， 然 而， 如 果 没 有 动手 实践 写 程 序 这 
ANRE PARE? 本 章 的 知识 先是 介绍 了 WPEF 控 件 的 类 型 ， 任 何 一 个 
WPF 控 件 都 不 会 脱离 这 几 种 类 型 ， 只 要 你 能 举一反三 、 见 微 知 闭 ， 那 么 
所 有 控件 之 间 的 差别 束 只 在 细微 之 处 了 。 本 章 还 介绍 了 如 何 使 用 布局 元 
聚 将 控件 排列 在 ULF、 写 出 有 实用 意义 的 GUI 程序 。 学 完 这 章 知 识 ， 我 
们 已 然 可 以 动手 编写 WPF 程 序 了 。 后 而 的 章 市 束 在 这 个 “ 右 ” 的 承载 之 
下 ， 深 入 研究 编写 优秀 WPF 程 序 的 方法 。 


HEC F> 


>., 
AFA 
H 


iit JjWwPF pj 


zl I 


BN 
M. 
—a H 


AA — 
E 





生产 工具 的 先进 程度 代表 了 生产 力 的 水 平 。 纵 观 Windows 
GUI (Graphic User Interface， 图 形 用 户 寞 面 ) 应 用 程序 开发 工具 的 用 展 
历史 ， 程 序 员 们 在 短 短 十 几 年 内 束 经 历 了 从 石器 时 代 到 电气 时 代 的 变 童 
一 一 从 WindowsAPI、MFC (及 同类 工具 ) 到 Visual Basic 再 
到 .NETFramework。 编 程 工具 之 所 以 能 代表 软件 开发 的 生产 力 是 因为 每 
种 工具 背后 都 隐 着 着 一 整 僚 软件 开发 的 概念 和 方法 。 比 如 使 用 Visual 
C++ 这 个 工具 进行 WindowsAPI 开 发 时 ， 我 们 用 不 到 它 所 文 持 的 C++ 功 
能 ， 仅 仅 是 使 用 C 语 言 的 功能 、 在 面 癌 过 程 上 的 框架 内 调用 Windows 数 以 
万 计 的 API 函 数 、 依 赖 Windows 的 消息 机 制 来 创造 我 们 想 要 的 效果 ; + 
使 用 Visual C++ 进行 MFC 开 及 ， 程 序 员 了 束 可 以 使 用 C++ 语言 进行 面 问 对 
象 编程 了 了，Windows API 也 被 封装 成 与 控件 对 应 的 类 ，Windows 的 消 上 
人 航 封 痛 成 事件 的 难 形 ; 竺 到 使 用 Visual C++ 和 Visual Basic 进 行 
COMVActiveX 开 及 时 ， 程 序 员 们 的 开发 理念 义 上 升 到 组 件 化 《〈 更 高 级 的 
FHARR) ， 事 件 机 制 日 趋 完善 ， 进入 .NET 时 代 后 ， 程 序 设计 已 
经 完全 组 件 化 ， 托 管 的 Visual C++, Visual Basic 和 Visual C# 可 以 共享 组 
件 ， 同 时 还 建立 成 了 完善 的 Web 应 用 程序 开发 平 合 ..……… 

每 套 开 发 的 概念 和 方法 实际 上 束 是 一 伍 用 于 解雇 编程 问题 、 实 现 客 
户 需 求 的 理论 ， 我 们 谓 之 开 肥 的 方法 论 。 从 Windows API 到 .NET 
Framework， 开 发 的 方法 论 越 来 越 进化 ， 越 来 越 高 效 。WPEF 的 开 有 方法 
论 是 在 .NET Framework 方 法 论 的 基础 上 更 上 一 层 楼 的 产物 L u= 
容 现 有 Windows Form 开 发 的 方法 论 ， 同 时 叉 在 很 多 方 同 进行 了 升级 和 
创新 。 下 面 束 是 WPF 开 发 方法 论 的 一 些 要 系 : 

e 全 新 的 UI 设 计 理 念 : XAML 语 言 以 及 配套 工具 (包括 Blend 和 和 
Design) 。 

e 全 新 的 UI 布 局 理念 : 树 形 结构 和 各 种 布局 元 素 。 

e 全 新 的 基础 类 库 和 控件 集 : 所 有 控件 都 在 WPF 方 法 论 的 框架 下 
重新 设计 并 放置 在 System.Windows.Controls 名 称 空间 里 《这 了 束 是 为 什么 
总 能 在 System.Windows.Forms) 找到 同名 控件 的 原因 。 

e 升级 的 程序 驱动 模式 : 在 事件 驱动 的 基础 上 把 事件 包装 在 数据 
XHX (Data Binding) 里 ， 屎 原来 的 “UI 事件 驱动 程序 运行 ”为 “数据 驱动 
程序 运行 并 显示 在 UI 上 ”， 让 数据 从 被 动 和 从 属 的 地 位 回 到 了 程序 的 核 
心地 位 《这 也 正人 符 合 了 内 容 雇 定形 式 的 基本 思维 方式 ) 。 

e 升级 的 属性 系统 : 在 .NET Framework 属性 的 基础 上 新 增 依赖 属 
l'É (Dependency Property) 系统 以 及 其 派生 出 来 的 附加 属性 (Attached 
Property) . 


e 升级 的 事件 系统 : 在 .NET Framework 事 件 的 基础 上 新 增 路 由 事 





件 〈Routed Event) 系统 和 基于 它 的 命令 (Command) 系统 。 

e 升级 的 资源 系统 : WPF 程 序 可 以 使 用 资源 (Resource) 存储 更 
丰富 的 内 容 并 能 进行 非常 方便 的 检索 。 

e 全 新 的 模板 理念 : 在 WPF 中 ， 内 容 决 定形 式 的 理念 随处 可 见 。 
如 果 把 控件 的 功能 视 为 内 容 ， 则 可 使 用 控件 模板 (Control Template) 来 
控制 它 的 展现 ， 如 果 把 数据 视 为 内 容 ， 则 可 使 用 数据 模板 (Data 
Template) 把 数据 展现 出 来 。 

e 全 新 的 文档 与 打印 系统 : 基于 XPS 文 档 格 式 ，WPF 推 出 了 一 整 
父 与 文档 显示 和 打印 相关 的 类 和 控件 。 

e 全 新 的 3D 绘 网 系统 : WPF 不 但 具有 2D 绘 图 功能 ， 还 以 完整 的 类 
库 文 持 3D 给 图、 视角 和 光影 效果 。 

e 全 新 的 动画 系统 ， WPF 具 有 丰富 的 动画 (Animation) 创作 类 
库 ， 以 前 需要 程序 员 费 义 心 思 才 能 实现 的 动画 效果 现在 由 设计 师 使 用 
XAML 束 能 实现 (有 时 也 和 雷 要 程序 用 后 台 代 人 码 实 现 ) ， 很 容易 束 能 设计 
HEIE MH FE -o 

WPF HE EZ Z FE N PE28 UJ] ZAR AS mH ERE hg 
的 新 东西 ， 需 要 多 人 久 才 能 掌握 ?” 其 实 ， 这 些 新 理念 全 部 都 是 基于 现 有 理 
念 派 生出 来 的 ， 在 每 个 新 理念 中 你 都 能 找 熟 悉 的 影子。 温 故 知 狐 、 同 时 
尽 可 能 地 使 用 WPF 进 行 项 目 开 发 ， 两 个 月 的 时 间 簿 综 有 余 。 
顺便 提醒 大 家 一 句 : 开发 的 方法 论 是 开发 工具 的 精髓 ， 掌 握 了 一 种 开发 方法 论 就 掌握 了 
精通 茶 种 开发 工具 的 钥 是 。 只 学 习 某 种 开发 工具 而 不 去 深究 其 方法 论 和 内 涵 便 是 舍 本 逐 末 ; + 
是 使 用 某 种 开发 工具 去 实践 另 一 种 开发 工具 背后 的 方法 论 丈 更 是 南 轩 北 罗 了 。 比 如 ， 我 束 见 过 
一 些 程序 员 不 去 了 解 WPEF 的 方法 论 、 一 味 地 依靠 旧 有 经 验 ， 活 生生 把 WPF 当 作 Windows Form? 
用 ， 上 所 下 震 功 实在 可 异 。 
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精彩 的 内 部 世界 ! 














6 
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友好 的 图 形 用 户 界 面 (Graphic User Interface, GUID) 的 流行 也 就 是 

近 十 来 年 的 事情 ， 之 前 应 用 程序 与 用 户 的 交互 多 是 通过 控件 全 界面 
(Console User Interface，CUI) 完成 的 ， 我 至 今 也 喜人 不 了 刚刚 开始 学 习 

DOS 操 作 时 那 种 三 进 一 条 命令 按 下 回 车 后 不 知道 会 有 什么 结果 产生 的 新 
奇 感 党 。 图 形 用 户 界 面 的 操作 系统 开始 在 中 国 流 行 应 广 是 从 Windows 95 
正式 发 布 开 始 的 ， 旋 即 冠 以 Visual 的 开发 工具 (以 及 Borland 公 司 的 一 些 
同类 产品 ) 也 跟着 办 露头 角 。 记 得 那 时 候 人 硬件 能 跑 起 Windows 95 束 已 经 
相当 不 错 了 一 一 图 形 化 的 界面 还 是 很 消耗 便 件 资源 的 。 

GUI 作为 新 鲜 事 物 ， 理 所 当然 地 成 为 了 无 论 是 操作 系统 制造 商 还 是 
便 件 三 商 们 关注 的 焦点 。 我 们 车 用 撒 开 人 硬件 不 谈 音 说 操作 系统 开 肥 丙 ， 
也 束 是 微软 。Windows GUI 运行 的 机 理 是 使 用 消息 (Message) 来 驱使 
FETII ZT, RREK EH WEE, EEE J Ti 
钮 ， 都 会 产生 消息 ， 消 息 又 会 被 Windows 翻 译 并 送 达 目标 程序 然后 被 程 
序 所 处 理 。 这 上 听 起 来 并 没有 什么 问题 ， 我 们 尽管 把 消息 看 作 是 DOS 命 令 
的 升级 版 好 了 。 这 种 大 于 操作 系统 的 层 的 机 理 势 必 深 刻 地 影响 到 应 用 软 
件 开 发 的 方法 论 。 为 了 能 编写 出 Windows 上 运行 的 GUI 程序 ， 各 种 开发 
方法 论 也 必须 跟从 这 种 “ 消 晨 驱动 程序 ”的 基本 原理 。 正 是 沿 大 这 条 路 友 
展 ， 才 有 了 Windows API 开 发 的 纯 消 县 驱动 、 才 有 了 MFC 等 C++ 类 库 的 
HEIKI JA Visual Basic 开 始 到 .NET Framework 的 事件 驱动 
总 之 一 句 话 ， 程 序 是 被 来 目 UI 的 事件 〈 即 封 故 过 的 消息 ) 驱使 同 前 的 ， 
简称 “ 消 居 驱动 * 或 “事件 驱动 ?>。 因 为 消 奶 和 事件 大 都 来 自 于 UI， 所 以 统 
称 它们 为 “UI 驱动 程序 ”。 

消息 驱动 或 者 事件 驱动 本 吴 并 没有 错 ， 但 从 更 高 的 层次 上 来 看 ， 使 
FH*UDIJKZ/ FE HE"3T ACREEHE WIE 73 f GUINIGUP'.. EAR 7 f SCEUEEFE 
的 GUI 化 。 实 际 上 这 已 经 背离 了 程序 的 本 质 数据 加 算法 ， 同 时 迫使 
程序 员 把 很 多 精力 放 在 了 实现 UI 的 编程 上 。 这 还 不 算 完 ， 随 着 程序 UI 的 
日 趋 复 杂 ，UI 层 面 上 的 代码 与 用 于 处 理 数 据 的 馆 辑 代码 也 渐渐 纠缠 在 一 
起 变 得 难以 维护 。 为 了 避免 这 样 的 问题 ， 程 序 员 们 总 结 出 了 Model- 
View-Controler (MVC) 和 Model-View-Presenter (MVP) 等 诸多 设计 模 
式 来 把 UI 相关 的 代码 与 数据 迎 辑 相关 的 代码 分 开 。 
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和 输入， 经 过 算法 的 处 理 程序 会 反馈 一 个 输出 一 一 这 里 ， 数 据 处 于 程序 的 
核心 地 位 。 反 过 头 来 再 看 “UI 驱 动 程 序 ”， 数 据 处 于 航 动 地 位 ， 总 是 在 等 
竺 程序 接收 来 和 目 UI 的 消息 / 事件 后 被 处 理 或 者 算法 完成 处 理 后 航 显 示 。 
如 何在 GUI 编程 时 把 数据 的 地 位 由 被 动 变 主 动 、 让 数据 回归 程序 的 核心 
WE? 这 就 是 本 章 要 评 细 讲述 的 Data Binding. 


6.1 Data Binding 在 WPF 中 的 地 位 


如 由 把 一 个 应 用 程序 看 作 一 个 城市 ， 那 么 这 个 城市 内 部 的 交通 睛 定 
会 非 第 演 忙 ， 但 川 流 人 不 明 的 不 是 行人 和 和 车辆 而 是 数据 。 一 般 情况 下 ， 应 
用 程序 会 具有 三 层 结 构 ， 即 数据 存储 层 、 数 据 处 理 层 和 数据 展示 层 。 存 
储 层 相当 于 一 个 城市 的 仓储 区 ， 由 数据 库 和 文件 系统 构成 ;， 处 理 层 更 正 
确 的 称呼 应 该 是 远 辑 层 ， 与 业务 远 辑 相关 、 用 于 加 工 处 理 数 据 的 算法 部 
集中 在 这 里 ， 这 一 层 相 当 于 城市 的 工业 区 ; 展示 层 的 功能 是 把 加 工 后 的 
数据 通过 可 视 的 界面 展示 给 用 户 或 者 通过 其 他 种 类 的 接口 展示 给 列 的 应 
用 程序 界面 和 接口 两 个 词 在 器 文中 均 为 interface， 所 以 本 质 上 没有 什 
么 区 别 ) ， 还 需要 收集 用 户 的 操作 、 把 它们 反馈 给 逻辑 层 ， 所 以 这 一 层 
相当 于 城市 的 港口 区 。 

如 果 你 是 一 名 市 长 ， 你 就 要 对 这 个 城市 的 布局 和 友 展 负 贡 一 一 仓储 
区 、 产 业 园 和 海港 区 ， 你 打算 怎么 投资 ? 每 个 园区 下 多 大 力气 开 友 ? 每 
个 园区 内 部 应 该 怎么 友 展 ? 几 个 区 之 间 的 交通 如 何 规划 才能 整洁 高 效 ? 
怎样 为 未 来 的 扩建 留 有 余地 ..…... 这 些 都 是 你 要 面 对 的 问题 。 其 实 ， 架 构 
师 要 做 的 事情 也 十 这 些 ! 

程序 的 本 质 是 数据 加 算法 。 数 据 会 在 人 存储、 逻辑 和 展示 三 个 层 流 
通 ， 所 以 站 在 数据 的 角度 上 来 看 ， 这 三 层 午 很 重要 。 但 算法 在 程序 中 的 
分 布 融 不 均 义 了 ， 对 于 一 个 三 层 结构 的 程序 来 说 ， 算 法 一 般 分 布 在 这 几 


AL: 

.数据库 内 部 。 
. 读 取 和 写 回 数据 。 
.业务 人 逻辑。 
， 数 据 展示 。 
， 界面 与 逻辑 的 交互 。 
、B 两 个 部 分 的 算法 一 般 都 非常 稳定 ， 不 会 轻易 去 改动 ， 复 用 性 
也 很 高 ，C 处 与 客户 需求 关系 最 紧密 、 最 复杂 ， 变 动 也 最 大 ， 大 多 数 得 
NE SN HP snn an as 
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显然 ，C 部 分 征程 序 的 核心 、 古 开发 的 重 中 之 重 ， 所 以 我 们 应 该 把 
精力 集中 在 C 部 分 。 然 而 ，D、E 两 个 部 分 却 经 钊 成 为 麻烦 的 来 源 。 首 
和 匈 ， 这 两 部 分 都 与 饮 辑 层 乏 黎 相 关 ， 一 不 小 心 融 有 可 能 把 本 来 该 放 在 逻 
和 辑 层 里 的 算法 写 进 这 两 部 分 〈 所 以 才 有 了 MVC、MVP 等 模 陈 来 避免 这 
种 情况 出 现 ) ; 其 次 ， 这 两 个 部 分 以 消 晨 或 事件 的 方式 与 逻辑 层 沟 通 ， 
一 旦 出 现 同一 个 数据 需要 在 多 处 展示 / 修改 时 ， 用 于 同步 的 代码 束 会 错 
RRR; 最 后 ，D 和 E 本 应 是 互 记 的 一 对 儿 ， 但 却 需要 分 开 来 与 显 
示 数 据 写 一 个 算法 、 修 改 数 据 又 是 一 个 算法 。 总 之 导致 的 结 末 台 是 D 和 
E 两 个 部 分 会 占 去 一 部 分 算法 ， 捅 不 好 还 会 府 扯 不 少 精 力 。 

问题 的 根源 吏 在 于 网 和 辑 层 与 展示 层 的 地 位 不 辐 定 AA SCHULE Mi 
eK HS] e. X8 RESI RR A E poc zr, (HJ / SCHLUIAE B. RESTE BS RES ]= 
又 处 于 中 心地 位 。WPF 作 为 一 种 专门 的 展示 层 技 术 ， 华 丽 的 外 观 和 动画 
只 是 它 的 表层 现象 ， 更 草 要 的 是 它 在 深层 次 上 帮助 程序 员 把 思维 的 重心 
固定 在 了 进 辑 层 、 让 展示 层 永 远 处 于 泌 辑 层 的 从 属地 位 。WPF 有 具有 这 种 
能 力 的 关键 是 它 引 入 了 Data “Binding 概念 以 及 与 之 配套 的 Dependency 
Property 系 统 和 DataTemplate。 

在 从 传统 的 Windows ” Form 迁移 到 WPF 之 后 ， 对 于 一 个 三 层 程序 而 
言 ， 数 据 存 储 层 由 数据 库 和 文件 系统 来 构建 ， 数 据 传 输 和 处 理 仍然 使 
用 .NET “Framwork 的 ADO.NET 等 基本 类 (与 Windows Form 等 开发 一 
样 ) ， 展 示 层 则 使 用 WPF 类 库 来 实现 ， 而 展示 层 与 逻辑 层 的 沟通 就 使 用 
Data Binding 来 实现 。 可 见 ，Data Binding 在 WPF 系 统 中 起 到 的 是 数据 高 
速 公路 的 作用 。 有 了 这 条 高 速 公 路 ， 加 工 好 的 数据 会 目 动 送 达 用 户 寞 面 
加 以 显示 ， 被 用 户 修改 过 的 数据 也 会 和 目 动 传 回 逻辑 层 ， 一 旦 数据 被 加 工 
I X AMBOS P EB... FEFE EU 71 284 7JHJ 5| EAS Fs 
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引入 Data Binding 机 制 后 ，D、E 两 个 部 分 会 简化 很 多 。 首 先 ， 数 据 
在 逻辑 层 与 用 户 寞 面 之 间 “ 直 来 直 去 ”、 不 涉及 逻辑 问题 ， 这 样 用 户 界 面 
部 分 几乎 不 包含 算法 ;Data Binding 本 里 就 是 双 同 通信 ， 所 以 相当 于 把 DD 
和 FE 合 二 为 一 ; 对 于 多 个 UI 元 系 关 注 同 一 个 数据 的 情况 ， 只 和 需 使 用 Data 
Binding 把 这 些 UI 元 系 一 一 与 数据 关联 上 【以 数据 为 中 心 的 星 形 结 
构 ) ， 当 数据 变化 后 这 些 UI 元 系 会 同步 喧 示 这 一 变化 。 你 看 ， 前 面 所 到 
的 那些 问题 是 不 和 是 迎刃而解 ! 更 重要 的 是 ， 经 过 这 样 的 优化 ， 所 有 与 业 
务 逻 辑 相 关 的 拭 法 部 处 在 数据 过 辑 层 ， 风 辑 层 成 为 一 个 能 够 独立 运转 
的 、 完 整 的 体系 ， 而 用 户 界 和 面 层 则 不 含 任何 代码 、 完 全 依赖 和 从 属于 数 
据 进 辑 层 。 这 样 做 有 两 个 显 而 多 见 的 好 处 ， 第 一 ， 如 果 把 UI 层 看 作 是 应 
用 程序 的 “及 ”、 把 存储 层 和 远 辑 层 看 作 是 程序 的 “ 狐 ”*”， 那 么 我 们 可 以 很 











轻易 地 把 皮 从 车 上 撕 下 来 并 换 一 个 狐 的 ;， 第 二 ， 因 为 数据 层 能 够 独立 运 
转 、 目 成 体系 ， 所 以 我 们 可 以 进行 更 完 秋 的 里 元 测试 而 无 逢 信 助 UI 目 动 
化 测试 工具 一 一 你 完全 可 以 把 单元 测试 代码 想象 成 一 个 “看 人 不见 的 UL”， 
单元 灿 试 只 是 使 用 这 个 “UI” 绕 过 真实 的 UI 生 接 测试 业务 逻辑 轿 了 。 


6.2 Binding thi 


如 采 不 知道 Binding 一 词 的 含义 ， 那 么 它 将 永远 是 大 脑 中 的 一 个 符 
号 。Binding 一 词 在 汉语 中 冤 竟 是 什么 意思 呢 ? 大 概 是 出 于 方便 ， 业 界 
一 直 使 用 Binding 一 词 的 音译 ， 即 “ 绑 定 ”。 这 绑 定 中 的 “ 绑 ” 大 和 概 是 取材 于 
Bind 这 个 词 的 “捆绑 ”之 “ 绑 ”; “ 定 ? 则 更 像 是 一 个 拼 首 以 音 详 音 ， 没 
什么 意义 。 实 际 上 ， 英 文中 ， 动 词 Bind 在 转化 为 名 词 Binding 后 ， 除 了 原 
有 的 “捆绑 ?之 意外 又 引申 出 了 了“ 关联? 和“ 键 联 ?的 含义 。 比 如 ， 原 子 键 联 
(atomic binding) 、 化 学 键 联 (chemical binding) ~ Z5% (binding- 
beam) 等 都 用 到 了 Binding 一 词 。 也 就 是 说，Binding 更 注音 表达 它 是 一 
种 保 桥 梁 一 样 的 天 联 关 系 。WPF 中 ， 正 古 在 这 上 段 桥 染 上 我 们 有 机 会 为 往 
来 注 退 的 数据 做 很 多 事情 。 

如 果 把 Binding 比 作 数 据 的 桥 染 ， 那 么 它 的 两 新 分 别 是 Binding 的 源 
(Source) 和 目标 《Target) 。 数 据 从 哪里 来 哪里 束 是 源 ，Binding 是 总 
在 中 间 的 桥 潍 ，Binding 目 标 是 数据 要 往 哪 儿 去 《所 以 我 们 束 要 把 桥 染 
器 哪里 )。 一 上 般 情 况 下 ，Binding 产 是 逻辑 层 的 对 象 ，Binding 目 标 古 UI 
屋 的 控件 对 象 ， 这 样 ， 数 据 就 会 源源 不 断 退 过 Binding 壕 达 UI 屋 、 锌 UI 
层 展 现 ， 也 束 完 成 了 数据 驱动 UI 的 过 程 。“ 一 桥 飞 涤 丙 北 ， 天 筷 变 通 
途 ”， 我 们 可 以 想象 Binding 这 座 桥梁 上 铺设 了 融 速 公路 ， 我 们 不 但 可 以 
控制 公路 是 在 源 与 目标 之 间 双 同 通 行 还 古 菜 个 方 同 的 单行 道 ， 还 可 以 控 
制 对 数据 放行 的 时 机 ， 甚 爹 可 以 在 桥 上 架设 一 些 “ 天 卡 ” 用 来 转换 数据 类 
型 或 者 检验 数据 的 正确 性 。 

对 Binding 有 了 一 个 形象 的 基本 概念 后 ， 让 我 们 看 一 个 最 基本 的 例 
子 。 这 个 例子 束 是 创建 一 个 简单 的 数据 源 并 通过 Binding 把 它 连 接 到 UI 


元 素 上 。 
-—— 我 们 创建 一 个 名 为 Student 的 类 ， 这 个 类 的 实例 将 作为 数据 源 
Y 用 。 








class Student 


private string name; 


public string Name 
| 
l 
get | return name; | 
set | name - value; | 
I 
| 


可 以 看 到 Student 这 个 类 非常 简单 ， 简 单 到 只 有 一 个 string 类 型 的 
Name 必 性。 前 面 说 过 ， 数 据 源 是 一 个 对 象 ， 一 个 对 象 刁 上 可 能 有 很 多 
数据 ， 这 些 数 据 叉 通过 属性 骏 露 给 外 界 。 那 么 ， 其 中 哪个 数据 是 你 想 通 
过 Binding 送 达 UI 元 素 的 呢 ? 换 句 话说 ，UI 上 的 元 素 关 心 的 是 哪个 属性 
值 的 变化 呢 ? 这 个 属性 就 称 为 Binding 的 路 径 (Path) 。 但 光 有 属性 还 不 
行 Binding 古 一 种 目 动 机 制 ， 当 值 变 化 后 属性 要 有 能 力 通 知 
Binding， 让 Binding 把 变化 传递 给 UI 元 系 。 怎 样 才 能 让 一 个 属性 具备 这 
种 通知 Binding 值 已 经 变化 的 能 力 呢 ? 方法 是 在 属性 的 set 语 句 中 激发 一 
个 PropertyChanged 事 件 。 这 个 事件 不 需要 我 们 目 己 声明 ， 我 们 要 做 的 是 
让 作为 数据 源 的 类 实现 System.ComponentModel 名 称 空间 中 的 
INotifyPropertyChanged 接 口 。 当 为 Binding 设 置 了 数据 产后 ，Binding 整 
会 日 动 侦 听 来 日 这 个 接口 的 PropertyChanged 事 件 。 

实现 了 INotifyPropertyChanged 接 口 的 Student 类 看 起 来 是 这 样 : 





class Student : INotifyPropertyChanged 


| 
1 


public event PropertyChangedEventHandler PropertyChanged; 
private string name; 


public string Name 
| 
get | return name; } 
sel 
| 
name = value; 
i (his. PropertyChanged != null) 


this. PropertyChanged. Invoke(this, new PropertyChangedEventArgs("Name")); 


经 过 这 样 一 升级 ， 当 Name 属 性 的 值 发 生变 化 时 PropertyChanged 事 
FARRER, Binding ax A EF Ja R MEFA E E Y E EA 
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显示 新 的 全 。 

然后 ， 我 们 在 窗 体 上 准备 一 个 TextBox 和 一 个 Button。TextBox 将 作 
为 Binding 目 标 ， 我 们 还 会 在 Button 的 Click 事 件 发 生 时 改变 Student 对 象 的 
Name 属 性 值 。 


«Window x:Class-" WpfApplication]. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Titlez" Simple Binding" Height-" 110" Width-" 300" 
<StackPanel> 
«TextBox x:Name="textBoxName" BorderBrush-"Black" Margin="5" /> 
«Button Content-" Add Age" Margin-" 5" Click" Button. Click" > 
«/StackPanel^ 


«Window? 


结果 如 图 6-1 所 示 。 


|n ' Simple Binding 
































图 6-1 在 窗 体 上 准备 一 个 TextBox 和 一 个 Button 


接 下 来 ， 我 们 将 进入 最 重要 有 的 一 步 一 一 使 用 Binding 把 数据 源 和 UI 
元 素 连 接 起 来 。C# 代 码 如 下 : 





public partial class Window] : Window 
' 

Student stu; 

public Windowl() 

i 


InitializeComponent(); 


I| 准备 数据 源 


stu = new Student(); 


I| 1 & Binding 
Binding binding = new Binding(); 
binding.Source = stu; 


binding. Path = new PropertyPath(" Name"); 


I| 使 用 Binding 连接 数据 源 与 Binding 目标 
BindingOperations.SetBinding(this.textBoxName, TextBox. TextProperty, binding); 


private void Button. Click(object sender, RoutedEventArgs ë) 
i 


stu. Name += "Name": 


让 我 们 逐 句 解 谈 一 下 这 段 代 码 : 这 上 段 代 人 码 是 Window1 类 的 后 台 音 
分 ， 它 的 UI 部 分 是 上 面 给 出 的 XAMEL 人 代码。 “Student stu:” 是 为 Window1 
美声 明了 一 个 Student 关 型 的 成 员 变 量 ， 这 样 做 的 目的 是 为 了 在 Window1l 
的 Button.Click 事 件 处 理 融 中 都 能 访问 由 它 引 用 的 Student 实 例 

(数据 汤 ) 。 

£EWindow1H 1432 à FP *InitializeComponent(;"z& H z/J AE Hf, 
用 途 是 初始 化 UI 元 系 。“stu=new Student); X &J E GJ £& f —" T Student2s 
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在 准备 Binding 的 部 分 ， 先 是 用 “Binding binding-new Binding();” 声 


明 Binding 类 型 变量 并 创建 实例 ， 然 后 使 用 “binding.Source=stu;” 为 
Binding 实 例 指 定数 据 源 ， 最 后 使 用 “binding.Path=new 
PropertyPath("Name);” 语 句 为 Binding 指 定 访 问 路 径 。 

把 数据 源 和 目标 连接 在 一 起 的 任务 古 使 
用 “BindingOperations.SetBinding(...)” 方 法 完成 的 。 这 个 方法 的 3 个 参数 
古 我 们 记忆 的 重点 : 

e 第 一 个 参数 用 于 指定 Binding 的 目标 ， 本 例 中 是 
this.textBoxName. 

e 与 数据 源 的 Path 原 理 类 似 ， 第 二 个 参数 用 于 为 Binding 指 明 把 数 
据 送 达 目 标的 哪个 属性 。 只 是 你 会 发 现在 这 里 用 的 不 是 对 象 的 属性 而 是 
类 的 一 个 静态 只 读 (static readonly) 的 DependencyProperty 类 型 成 员 变 
E! 这 就 是 我 们 后 和 面 要 详细 讲述 的 与 Binding 恩 晨 相 关 的 依赖 属性 。 其 
实 很 好 理解 ， 这 类 属性 的 值 可 以 通过 Binding 依 赖 在 其 他 对 象 的 属性 值 
上 ， 被 其 他 对 象 的 属性 值 所 驱动 。 

e 第 三 个 参数 很 明了 ， 束 是 指定 使 用 哪个 Binding 实 例 将 数据 产 与 
目标 关联 起 来 。 

处 于 末尾 的 Button_Click(...) 方 法 是 Button 元 素 Click 事 件 的 处 理 器 ， 
在 它 内 部 我 们 对 数据 源 的 Name 属 性 进行 了 更 狐 。 

运行 程序 ， 当 你 单 击 Button 时 ，TextBox 就 会 即时 显示 更 新 后 的 
Name 属 性 但 ， 如 图 6-2 所 示 。 


| 下 1 Simple Binding 





Kl6-2 ” Binding 效果 示 例 


是 TextBox 这 类 UI 元 系 的 基 类 FrameworkElement 对 
BindingOperations.SetBinding(...) 方 法 进行 了 封装， 封装 有 的 结果 也 趾 
SetBinding， 只 是 参数 列表 发 生 了 变化 。 代 人 码 如 下 : 


public BindingExpressionBase SetBinding( DependencyProperty dp, BindingBase binding) 
| 

retum BindingOperations.SetBinding(this, dp, binding): 
1 


同时 ， 有 经 验 的 程序 员 人 还 会 信 助 Binding 类 的 构造 融 及 C# 3.0 的 对 象 
急 始 化 融 语 法 来 简化 代码 。 这 样 一 来 ， 上 面 这 段 代 码 有 可 能 成 为 这 样 : 


public Windowl() 


| 
l 


InitializeComponent(): 
/ 三 台 一 操作 
this.textBoxName.SetBinding( TextBox. TextPropertv, new Binding(" Name") { Source = stu = new Student() |): 
上 和 面 这 个 例子 ， 我 们 已 经 在 头脑 中 建立 起 了 如 图 6-3 所 示 的 模 
Binding 目标 | Binding (数据 ) W 
inding 目标 binding X inding CAE Jj 
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图 6-3 ”Binding 模 型 


有 了 这 个 例子 打 基础 ， 后 面 的 章节 我 们 将 细致 地 研究 Binding 的 每 


^ RE ES 
6.3 Binding 的 源 与 路 径 


DM Binding 对 源 的 要 求 并 不 苛刻 一 一 
只 要 它 是 一 个 对 象 ， 并 且 通 过 属性 (Property) 公开 自己 的 数据 ， 它 就 


ds 


能 作为 Binding 的 源 。 

前 面 一 个 例子 已 经 问 大 家 说 明 ， 如 果 想 让 作为 Binding 源 的 对 象 具 
有 上 自动 通知 Binding 目 己 的 属性 值 已 经 变化 的 能 力 ， 那 么 就 需要 让 类 实 
现 INotifyPropertyChanged 接 口 并 在 属性 的 Set 语句 中 激 及 PropertyChanged 
事件 。 在 日 第 的 工作 中 ， 除 了 使 用 这 种 对 象 作为 数据 产 外 ， 我 们 还 有 更 
多 的 选择 ， 比 如 控件 把 目 己 或 目 己 的 容 莫 或 子 级 元 系 当 源 、 用 一 个 控件 
作为 为 一 个 控件 的 数据 源 、 把 集合 作为 emsControl 的 数据 源 、 使 用 
XML 作为 TreeView 或 Menu 的 数据 着 、 把 多 个 控件 关联 到 一 个 “数据 制 高 
点 ”上 ， 其 至 干脆 不 给 Binding 指 定数 据 产 、 让 它 上 自己 去 找 。 下 面 ， 我 们 
束 分 述 这 些 情况 。 


6.3.1 ”把 控件 作为 Binding 源 与 Binding 标 记 扩 展 


亲 面 提 过 ， 大 多 数 情 况 下 Binding 的 源 是 逻辑 层 的 对 象 ， 但 有 时候 
为 了 让 UI 元 素 产 生 一 些 联动 效果 也 会 使 用 Binding 在 控件 间 建 立 关 联 。 
下 面 的 代码 是 把 一 个 TextBox 的 Text 属 性 关联 在 了 Slider 的 Value 属性 上 。 


«Window x:Class-"WpfApplication] Window1" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title" Control as Source" 

Height-" 110" Width" 300" 
<StackPanel> 
<TextBox x:Name="textBoxl” Text-"[Binding Path=Value, ElementName=sliderl!” BorderBrush= Black 
MargIm= 3 /> 
«Slider x:Name="slider 1" Maxımum="100" Minimum="0" Margin-" 5" /> 
</StackPanel> 

</Window> 

运行 效 打 如 网 6-4 所 示 。 











图 6-4 ”使 用 Binding 在 控件 间 建 立 关 联 


正如 大 家 所 见 ， 除 了 可 以 在 C# 代 人 码 中 建 六 Binding 外 在 XAML 人 代码 
里 也 可 以 方便 地 设置 Binding， 这 就 给 了 设计 师 很 大 的 目 由 度 来 决定 UI 
元 素 之 加 的 关联 情况 。 值 得 注意 的 是 ， 在 C# 代 人 码 中 可 以 访问 XAML 代 人 码 
中 声明 的 变量 但 XAML 代 码 中 却 无 法 访问 C# 代 人 码 中 声明 的 变量 ， 因 此 ， 
SZUTEXAMLHP g& V UDU 532 48 ELS] A Binding 2 An 23 15 [8] yT , 
把 逻辑 层 对 象 声 明 为 XAML 代 人 三 中 的 资源 (Resource) ， 我 们 把 它 放 在 
资源 一 章 去 解释 。 

回 过 汰 来 看 这 人 句 XAML 代 人 码 ， 它 使 用 了 Binding 标 记 扩 展 语 法 : 


«TextBox x:Name-"textBox 1" Text="!Binding Path=Value, ElementName=sliderl }" BorderBrush= Black" Margin="5" /> 
与 之 等 价 的 C# 代 码 是 ; 
this.textBox1,SetBinding(TextBoX,TextProperty new Binding(" Value") |ElementName-"slider]" 1); 


7jBinding2S [f] Jae si As Ey n] DA Bel PathfE 792265, Br pA tB TS E 


«TextBox x:Name-"textBox 1" Text-" (Binding Value, ElementName-sliderl j" BorderBrush-" Black" Margin-"5" /> 


TEE 
为 在 C# 代 码 中 我 们 可 以 直接 访问 控件 对 象 ， 所 以 一 般 也 不 会 使 用 Binding 的 
ElementName 属 性 ， 而 是 直接 把 对 象 赋值 给 Binding 的 Source 属 性 。 


Binding 的 标记 扩展 语法 ， 初 看 起 来 平淡 无 奇 其 至 有些 询 扭 ， 但 细 
品 起 来 就 会 发 现 它 的 精巧 之 处 。 说 它 “ 别 扭 ” 是 因为 我 们 已 经 习惯 了 
Text-"Hello World" 这 种 “ 键 一 人 ?去 的 赋值 方式 ， 而 且 认 为 值 与 属性 的 数 
据 类 型 一 定 要 一 致 一 一 大 脑 很 快 会 质询 Text="{Binding Value, 
ElementName-  slider1)" HE IR] zs 48. Text] 2878 string, JITA 9 
研一 个 Binding 关 型 的 值 呢 ? ERK, FA Ze 7yTexU& PES f — A 
Binding 类 型 的 值 ?”， 为 了 消除 这 个 误会 ， 你 可 以 把 这 名 代码 谈 作 “为 Text 
属性 设置 Binding 为 ..………… ”。 有 册 想 深 一 步 ， 在 编程 时 我 们 不 是 经 间 把 函数 
视 为 一 个 值 吗 ? 只 是 这 个 值 需要 在 函数 执行 结束 后 才能 得 到 。 同 理 ， 我 
们 也 可 以 把 {Binding} 视 为 一 个 仁 ， 只 是 这 个 全 并非 像 "Hello World" E $1 
串 一 样 直 接 和 固定 。 也 惑 是 说 ， 我 们 可 以 把 Binding 视 为 一 种 间接 的 、 
不 国定 的 赋值 方式 Binding 标 记 扩 展 很 恰当 地 表示 了 这 个 仿 》 


6.3.2 ”控制 Binding 的 方 同 及 数据 更 新 











Binding 在 源 与 目标 之 间架 起 了 沟通 的 桥 桨 ， 默 认 情 况 下 数据 既 能 
够 通过 Binding 送 达 目 标 ， 也 能 够 从 目标 返回 源 〈 收 集 用 户 对 数据 的 修 
改 ) 。 有 时 候 数 据 只 需要 展示 给 用 户 、 不 允许 用 户 修 改 ， 这 时 候 可 以 把 
Binding 模 式 更 改 为 从 源 回 目标 的 蛙 同 沟通 。Binding 还 文 持 从 目标 问 源 
的 单 问 沟通 以 及 只 在 Binding 关 系 确 立时 谈 取 一 次 数据 ， 这 需要 我 们 根 
据 实 际 情况 去 选择 。 

控制 Binding 数 据 流向 的 属性 是 Mode， 它 的 类 型 是 BindingMode 枚 
准 。BindingMode 可 取 值 为 TWoWay、OneWay、OnTime、 
OneWayToSource 和 Default。 这 里 的 Default 值 是 指 Binding 的 模式 会 根据 
目标 的 实际 情况 来 确定 ， 比 如 在 是 可 编辑 的 〈 如 TextBox.Text 必 性 ) , 
Default KHA In] aA 看 是 只 恋 的 〈 如 TextBlock.Text) JJ Hj Æ [n] 
模式 。 

接 上 一 人 小节 的 例子 ， 当 我 们 拖 动 Slider 的 手柄 时 ，TextBox 里 就 会 显 
示 出 Slider 当 前 的 值 《实际 上 这 里 面 涉及 到 一 个 从 double 类 型 到 string 类 
型 的 转换 ， 车 且 忽 略 不 计 ) ; 如 果 我 们 在 TextBox 里 输入 一 个 恰当 的 
值 ， 然 后 按 一 下 Tab 键 、 让 焦点 离开 TextBox， 则 Slider 的 手柄 会 跳 到 相 
应 的 值 那 里 。 如 图 6-5 所 示 。 
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图 6-5 ”失去 焦 扣 后 Slider 的 值 根据 输入 而 变化 的 情况 


为 什么 一 定 要 在 TextBox 失 去 焦点 之 后 Slider 的 值 才 会 改变 昵 ?” 这 束 
引出 了 Binding 的 为 一 个 属性 一 一 UpdateSourceTrigger， 它 的 类 型 是 
UpdateSourceTrigger 枚 人 誉 ， 可 取 值 为 PropertyChanged、LostFocus、 
Explicit 和 Default。 显 然 ， 对 于 TextBox 默 认 值 Default 的 行为 与 LostFocus 
一 臻 ， 我 们 只 需要 把 这 个 属性 改 为 PropertyChanged， 则 Slider 的 手 顶 束 
会 随 看 我 们 在 TextBox 里 的 输入 而 改变 位 置 。 


y cm. 
1Y 工 忆 


顺便 提 一 句 ，Binding 还 具有 NotifyOnSourceUpdated 和 NotifyOnTargetUpdated 两 个 bool 类 型 
的 属性 。 如 果 设 为 true， 则 当 源 或 目标 被 更 新 后 Binding 会 激 友 相应 的 SourceUpdated 事 件 和 
Dye 。 实 际 工 作 中 ， 我 们 可 以 通过 监听 这 两 个 事件 来 找 出 有 哪些 数据 或 控件 被 更 
I Í ° 








6.3.3 Binding 的 路 径 (Path) 


作为 Binding 源 的 对 象 可 能 有 很 多 属性 ， 通 过 这 些 属性 Binding 源 可 
以 把 数据 暴露 给 外 界 。 那 么 ，Binding 到 底 需 要 关注 哪个 属性 的 值 呢 ? 
这 束 需 要 由 Binding 的 Path 属 性 来 指定 了 。 例 如 前 面 这 个 例子 ， 我 们 是 把 
Slider 控 件 对 象 当 作 源 、 拒 它 的 Value 属性 作为 路 径 。 

尽管 在 XAML 代 码 中 或 者 Binding 关 的 构造 器 参数 列表 中 我 们 以 一 个 
字符 串 来 表示 Path， 但 Path 的 实际 类 型 是 PropertyPath。 下 面 让 我 们 看 看 
如 何 创建 Path 来 应 对 各 种 情况 我 将 使 用 XAML 和 C# 两 种 语言 插 述 )。 

最 简单 的 情况 吏 是 直接 把 Binding 关 联 在 Binding 源 的 属性 上 ， 前 面 
的 例子 束 是 这 梓 。 语 法 如 下 : 


<TextBox x:Name="textBox 1" Text={Binding Path=Value, ElementName=sliderl }" /> 
等 效 的 C# 代 码 是 ; 


Binding binding = new Binding()| Path= new PropertyPath(" Value"), Source = this.sliderl }; 
this.textBox l.SetBinding(TextBox. TextProperty, binding); 


AEH Binding] 428 gy [8] 53 7J: 
Binding binding = new Binding(" Value") | Source = this.slider] }; 
this.textBox l.SetBinding( TextBox. TextProperty, binding); 
Binding 还 文 持 多 级 路 径 《〈 通 俗 地 讲 吏 是 一 路 “点 ?下 去 ) 。 比 如 ， 如 
果 我 们 想 让 一 个 TextBox 显 示 故 外 一 个 TextBox 的 文本 长 上 度 ， 我 们 可 以 


<StackPanel> 
<TextBox x:Name="textBox1" BorderBrush-"Black" Margin="5" /> 
<TextBox x:Name="textBox2" Text=" {Binding Path=Text.Length, ElementName=textBox1, Mode=0neWay}" 
BorderBrush="Black" Margin="5" /> 
</StackPanel> 


等 效 的 C# 代 码 是 : 


this.textBox2.SetBindinp( TextBox. TextProperty, new Binding("Text.Length") | Source = this.textBox1, Mode= 
BindingMode.One Way }; 


运行 效果 如 图 6-6 所 示 。 
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Kl6-6 一 个 TextBox 显 示 男 一 个 TextBox 的 文本 长 度 


我 们 知道 ， 集 合 类 型 的 索引 器 〈Indexer) 又 称 为 带 参 属性 。 既 然 是 
属性 ， 有 索引 器 也 能 作为 Path 来 使 用 。 比 如 我 想 让 一 个 TextBox 显 示 男 一 
个 TextBox 文 本 的 第 四 个 字符 ， 我 们 可 以 这 样 写 : 


<StackPanel> 
<TextBox x:Name="textBox1" BorderBrush-"Black" Margin="5" /> 
<TextBox x:Name="textBox2" Text=" {Binding PathzText.[3], ElementName=textBoxl, Mode=OneWay 
BorderBrush-"Black" Margin-"5" /> 
</StackPanel> 


等 效 的 C# 代 码 是 : 
this.textBox2.SetBinding(TextBox.TextProperty, new — Binding("Text[3]) | “Source this.textBoxl, Mode = 
BindingMode. OneWay 1); 


我 们 甚至 可 以 把 Text 与 [3] 之 间 的 那个 “.” 省 揉 ， 它 一 样 可 以 正确 工 
作 。 运 行 效 果 如 图 6-7 所 示 。 











图 6-7 索引 器 作为 Path 示 例 


当 使 用 一 个 集合 或 者 DataView 作 为 Binding 源 时 ， 如 果 我 们 想 把 它 
的 默认 元 系 当 作 Path 使 用 ， 则 需要 使 用 这 样 的 语法 : 


List<string> stringList = new List<string>() { "Tim", "Tom", "Blog" !; 

this.textBox l.SetBinding( TextBox. TextProperty, new Binding("/") | Source = stringList 1); 

this.textBox2. SetBinding( TextBox. TextProperty , new Binding("/Length") | Source = stringList, Mode = 
BindingMode.One Way }); 

this.textBox3.SetBinding( TextBox. TextProperty, new Binding("/[2]") / Source = stringList, Mode = 
BindingMode.OneWay 1); 


运行 的 效 来 如 图 6-8 所 示 。 
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图 6-8 ”默认 元 素 作 为 Path 使 用 


如 末 集 合 元 对 的 属性 仍然 还 是 一 个 集合 ， 我 们 想 把 子 级 集合 中 的 元 
则 可 以 使 用 多 级 和 料 线 的 语法 《〈 即 一 路 “ 笠 线 "下 去 ) ， 例 
H: 


I| 相关 类 型 
class City 
| 


public string Name | get; set; | 


class Province 
| 
public string Name | get; set; } 


public ListeCity» CityList | get; set; } 


class Country 
| 
public string Name | get; set; } 
public ListeProvince» ProvinceList | get; set; } 


|i Binding 

List<Country> countryList = new List<Country> { /*#JI01/....*/ ); 

this.textBox SetBinding( TextBox. TextProperty, new Binding("/Name") | Source = countryList 1): 

this.textBox2. SetBinding( TextBox. TextProperty, new Binding("/ProvinceList.Name") | Source = countryList 1); 

this.textBox3.SetBinding( TextBox. TextProperty, new Binding("/Provinces/Cit yList.Name") | Source = countryList ]); 
运行 效果 如 图 6-9 所 示 。 
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图 6-9 ” 子 级 集合 中 的 元 素 作为 Path 


6.3.4 “和 没有 Path>” 的 Binding 


有 的 时 候 我 们 会 在 代码 中 看 到 一 些 Path 是 一 个 “.? 或 者 干脆 没有 Path 
的 Binding， 着 实 让 人 摸 不 着 头脑 。 原 来 ， 这 是 一 种 比较 特殊 的 情况 
Binding 源 本 喘 就 是 数据 且 不 需要 Path 来 指明 。 和 典型 的 ，string、int 
等 基本 类 型 束 是 这 样 ， 他 们 的 实例 本 号 束 古 数据 ， 我 们 无 法 指出 通过 它 
的 哪个 属性 来 访问 这 个 数据 ， 这 时 我 们 只 需 将 Path 的 值 设 置 为 “.? 残 可 以 
了 。 在 XAML 代 码 里 这 个 “.? 可 以 省 略 不 写 ， 但 在 C# 代 但 里 却 不 能 省 
WE. WA PII: 


<StackPanel> 
<StackPanel. Resources? 
<sys:String x:Key=" myString > 
BAUM. ONES: 
KREM, BET. 
</sys:String> 


«StackPanel. Resources> 





<TextBlock x:Name="textBlock1" TextWrapping=" Wrap" 
Text="{Binding Path=., Source={StaticResource ResourceKey=myString}}” FontSize="16" 
Margin- 3" /> 
</StackPanel> 


运行 效果 如 图 6-10 所 示 。 





E" Binding Path 


车 提 本 无 树 ， 明镜 亦 非 台 。 


本 来 无 一 物 ， 何 处 车 尘埃 。 


图 6-10 实例 本 身 就 是 数据 源 示 例 
上 面 的 代码 可 以 简 与 成 这 样 : 


Text= [Binding ., Sourcez(StatieResource ResourceKeyemyString]]" 
gk 


— 


Text= [Binding Source-[StaticResource ResourceKey2myString]]" 

注意 

最 后 这 种 简写 方法 很 容易 锌 误解 为 没有 指定 Path， 其 实 只 是 和 省略 挥 了 。 与 之 等 效 的 C# 代 
码 如 下 《作为 Path 的 “.” 是 不 能 省 略 的 〉。 

string myString=" 营 提 本 无 树 ， 明 镜 亦 非 台 。 本 来 无 一 物 ， 何 处 车 尘埃 。"; 

this.textBlock1.SetBinding(TextBlock.TextProperty, new Binding("."){Source=myString J); 
注意 

最 后 顺便 提 一 句 ，PropertyPath 类 型 除了 用 于 Binding 的 Path 属 性 外 ， 在 动画 编程 的 时 候 也 

会 派 上 用 场 (Storyboard.TargetProperty) 。 在 用 于 动画 编程 时 ，PropertyPath 还 有 另外 的 语法 ， 
到 时 候 我 们 再 来 细 说 。 


6.3.5 ”为 Binding 指 定 源 (Source) 的 几 种 方法 


上 一 人 小节 我 们 通过 学 习 Binding 的 Path 知 道 了 如 何在 一 个 对 象 身 上 寻 
找 数据 。 这 一 小 市 我 们 来 学 习 如 何 为 Binding 指 定 Source。 

Binding 的 源 是 数据 的 来 源 ， 所 以 ， 只 要 一 个 对 象 包含 数据 并 能 通 
过 属性 把 数据 又 露出 来 ， 它 束 能 当 作 Binding 的 源 来 使用。 包含 数据 的 
对 象 比 比 独 是 ， 但 必须 为 Binding 的 Source 指 定 合适 的 对 象 Binding 才 能 
正确 工作 ， 和 闻 见 的 办 法 有 : 

e 把 普通 CLR 类 型 单个 对 象 指 定 为 Source: 包括 .NET Framework 
目 市 类 型 的 对 象 和 用 户 目 定义 类 型 的 对 象 。 如 果 类 型 实现 了 
INotifyPropertyChanged 接 口 ， 则 可 通过 在 属性 的 set 语 句 里 油 发 
PropertyChanged 事 件 来 通知 Binding 数 据 已 被 更 新 。 

e 把 普通 CLR 集 合 类 型 对 象 指定 为 Source: 包括 数组 、List<T>、 
ObservableCollection<T> 等 集合 类 型 。 实 际 工作 中 ， 我 们 经 党 需要 把 一 
个 集合 作为 temsControl 派 生 类 的 数据 源 来 使 用 ， 一 般 是 把 控件 的 
ItemsSource 属 性 使 用 Binding 关 联 到 一 个 集合 对 象 上 。 

e 把 ADO.NET 数 据 对 象 指定 为 Source: 包括 DataTable 和 DataView 
等 对 象 。 

e 使 用 XmlDataProvider 把 XML 数据 指定 为 Source: XML 作为 标准 
的 数据 存储 和 传输 格式 儿 乎 无 处 不 在 ， 我 们 可 以 用 它 表 示 单 个 数据 对 象 
或 者 集合 ; 一 些 WPF 控 件 是 级 联 式 的 “如 TreeView 和 Menu)〉， 我 们 可 
以 把 树 状 结构 的 XML 数 据 作 为 源 指定 给 与 之 关联 的 Binding。 

e 把 依赖 对 象 (Dependency Object) 指定 为 Source: 依赖 对 象 不 
仅 可 以 作为 Binding 的 目标 ， 同 时 也 可 以 作为 Binding 的 源 。 这 样 惑 有 可 
能 形成 Binding 链 。 依 赖 对 象 中 的 依赖 属性 可 以 作为 Binding 的 Path。 

e 把 容 需 的 DataContext 指 定 为 Source (WPF Data Binding 的 默认 行 
为 ) : 有 时 候 我 们 会 过 到 这 样 的 情况 一 一 我 们 明 硝 知道 将 从 哪个 属性 获 


取 数 据 ， 但 具体 把 哪个 对 象 作 为 Binding 源 还 不 能 确定 。 这 时 候 ， 我 们 
只 能 先 建立 一 个 Binding、 只 给 它 设 置 Path 而 不 设置 Source， 让 这 个 
Binding 目 己 去 寻找 Source。 这 时 候 ，Binding 会 目 动 把 控件 的 
DataContext 当 作 目 己 的 Source( 它 会 沿 看 控件 树 一 层 一 层 问 外 找 ， 和 直到 
找到 市 有 Path 指 定 属性 的 对 象 为 止 ) 。 

e 通过 ElementName 指 定 Source: 在 C# 代 人 码 里 可 以 直接 把 对 象 作 
为 Source 赋 值 给 Binding， 但 XAML 无 法 访问 对 象 ， 所 以 只 能 使 用 对 象 的 
Name 属 性 来 找到 对 象 。 

e 通过 Binding 的 RelativeSource 属 性 相对 地 指定 Source: 当 控 件 需 
n. AHOK, BOIS E CAAA BJ: TP B BL ni AE HJ 22 l 
JKE.» 

e 把 ObjectDataProvider 对 象 指 定 为 Source: 当 数 据 源 的 数据 不 是 
通过 属性 而 是 通过 方法 暴露 给 外 界 的 时 候 ， 我 们 可 以 使 用 这 两 种 对 象 来 
包 竣 数据 源 再 把 它们 指定 为 Source。 

e 把 使 用 LINQ 检 索 得 到 的 数据 对 象 作 为 Binding 的 源 

下 面 我 们 融通 过 实例 分 述 每 种 情况 。 


6.3.6 ”没有 Source 罗 Binding 一 一 使 用 DataContext 作 为 
Binding 的 源 


有 前面 的 例子 都 是 把 早 个 CLR 类 型 对 象 指 定 为 Binding 肘 Source， 方 法 
有 两 种 把 对 象 赋值 给 Binding.Source 属 性 或 把 对 象 的 Name 赋 值 给 
Binding.ElementName。DataContext 属 性 被 定义 在 FrameworkElement 关 
里 ， 这 个 类 是 WPF 控 件 的 基 类 ， 这 意味 着 有 所 有 WPF 控 件 〈 包 括 容 医 控 
件 ) 都 具备 这 个 属性 。 如 前 所 述 ，WPE 的 UI 布 局 是 树 形 结构 ， 这 棵 树 的 
每 个 结 点 都 是 控件 ， 由 此 我 们 推出 另 一 个 结论 TfEUIZGUR P5 HJ AREA 
Aid4PfDataContext. X— SA E EE 52, D]73g25—^ Binding H RE E] r; 
的 Path 而 不 知道 目 己 的 Soruce 时 ， 它 会 治 看 UI 元 素 树 一 路 回 树 的 根部 找 
过 去 ， 每 路 过 一 个 结 点 束 要 看 看 这 个 结 点 的 DataContext 古 合 具 有 Path 所 
指定 的 属性 。 如 果 有 ， 那 就 把 这 个 对 象 作 为 日 己 的 Source; 如 果 没 有 ， 
那 束 继续 找 下 去 ;， 如果 到 了 树 的 根部 还 没有 找到 ， 那 这 个 Binding 就 没 
有 Source， 因 而 也 不 会 得 到 数据 。 让 我 们 看 下 面 的 例子 : 

先 创 建 一 个 名 为 Student 的 类 ， 它 具有 Id、Name、Age 三 个 属性 : 








public class Student 

| 
public int Id | get; set; | 
public string Name | get; set; | 


public int Age | get; set; | 


然后 在 XAML 创建 程 序 的 UI。 


«Window x:Class="WpfApplication1. Window1" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.mierosoft.com/winfsu/2006/xaml" 
xmins:local-"clr-namespace:W pf Application] " 

Title" Binding Source" Height-" 135" Width-" 300 > 
«StackPanel Background" LightBlue"? 
sStackPanel.DataContext» 
«local:Student Idz "6" Agez"29" Namez" Tim" /> 
«JStackPanel.DataContext» 
«Grid» 
«StackPanel- 
«TextBox Textz "| Binding PathzId]" Margin-" 5" /> 
«TextBox Text= "| Binding Path-Name]" Margin" 5" /> 
«TextBox Text= [Binding PathzAge]" Margin- > /> 
</StackPanel> 
«Gnd» 
</StackPanel> 


< Window> 


这 个 UI 的 布局 可 以 用 如 图 6-11 所 示 的 树 状 图 来 表示 : 


StackPanel 一 Student | 
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DataContext 











StackPanel 
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图 6-11 UI 树 状 图 


使 用 xmlns:local="clr-namespace:WpfApplication1"， 我 们 天 可 以 在 
XAML 代 人 码 中 使 用 上 面 在 C# 代 人 码 中 定义 的 Student 类 。 使 用 这 几 行 代 介 : 


«StackPanel.DataContext? 
<local:Student Id="6" Age-"29" Name- [Im /> 
«/StackPanel.DataContext? 


8i 7" E StackPanel H] DataContexti# íT f JI t &-— ^ Student 
对 象 。 三 个 TextBox 的 Text 通 过 Binding 获 取 值 ， 但 只 为 Binding 指 定 了 
Path、 没 有 指定 Source。 人 简写 成 这 样 也 可 以 : 


<TextBox Text= [Binding Id]" Margin- 5" /> 
«TextBox Textz" [Binding Name]" Margin- > > 
«TextBox Text= [Binding Age)" Margin- > /> 


XXE, 这 3 个 TextBox 的 HzIRUI UAM EESX 
可 用 的 DataContext 对 象 。 ， 它 们 在 最 外 层 的 StackPanel 导 上 找到 了 
可 用 的 DataContext 对 象 。 运 行 效 果 如 图 6-12 上 所 示 。 














Kl6-12 ”没有 为 Binding 指 定 Source 时 的 运行 效果 
在 前 面 学 习 Binding 路 径 的 时 候 我 们 已 经 知道 ， 当 Binding 的 Source 
本 刁 融 是 数据 、 不 需要 使 用 属性 来 又 露 数 据 时 ，Binding 的 Path 可 以 设置 
为 “.”， 亦 可 以 省 略 不 写 。 现 在 Source 也 可 以 省 略 不 写 了 ， 这 样 ， 当 基 个 
DataContext 是 一 个 简单 类 型 对 象 的 时 候 ， 我 们 完全 可 能 看 到 一 个 “ 既 没 
有 Path 又 没有 Source 的 ”Binding: 


«Window x:Class-"WpfApplicationl. Window] " 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sysz " clr-namespace:System;assemblyzmscorlib" 
Fontslze= 16" FontWeight-" Bold" 
Title= Binding Source" Height-" 135" Width-" 300" 
«StackPanel- 
«StackPanel.DataContext» 
«sys:String»Hello DataContext!«/sys:String? 
«IStackPanel.DataContext? 
«arid 
<StackPanel> 
<TextBlock Text=" {Binding Margin-"5" /> 
<TextBlock Text=" {Binding Margin-"5" /> 
<TextBlock Text=" {Binding}” Margin="5" > 
<JStackPanel> 
«fand» 
«/StackPanel* 


«Window» 


运行 效果 如 图 6-13 所 示 。 


| s Binding Source 


Hello DataContext! 
Hello DataContext! 


Hello DataContext! 








图 6-13 ”没有 指定 Path 和 Source 时 的 运行 效果 


你 可 能 会 想 ，Binding 是 怎样 日 动 es 的 上 层 寻 找 
DataContext 对 象 并 把 它 作 为 Source 的 呢 ? 其 实 ， “Binding 治 看 Ul TAN 
问 上 找 ” 只 是 WPF 给 我 们 的 一 个 错觉， Binding 并 没有 那么 智能 。 之 所 以 


会 有 这 种 效果 是 因为 DataContext 是 一 个 “依赖 属性 ”( 后 面 章节 会 详细 讲 
述 ) ， 依 赖 属性 有 一 个 很 重要 的 特点 束 古 当 你 没有 为 控件 的 某 个 依赖 属 
性 显 式 赋值 时 ， 控 件 会 把 日 己 容 右 的 属性 值 “ 借 过 来 ” 当 作 目 己 的 属性 
值 。 实 际 上 是 属性 值 治 痢 UI 元 妹 树 回 下 传递 了 了 。 这 里 有 个 简单 的 小 例 
子 ， 程 序 的 UI 部 分 古 夺 干 屋 Grid， 最 内 层 Grid 里 放置 了 一 个 Button， 我 
们 为 最 外 层 的 Grid 设 置 了 DataContext 属 性 值 ， 因 为 内 层 的 Grid 和 Button 
都 没有 设置 DataContext 属 性 值 所 以 最 外 层 Grid 的 DataContext 属 性 值 会 一 
下 传递 到 Button 那 里 ， 单 击 Button 束 会 显示 这 个 值 。 

程序 的 XAML 代 码 如 下 : 


«Window x:Class-"WpfApplicationl Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"DataContext" 
Height-" 120" Width-"240"5 

«Grid DataContextz" 6» 
«Grid» 
«ard» 
«Grid» 
«Button x: Name-"btn" Content-"OK" Click-"btn Click" > 
</Grid> 
«nd» 
<JGrid> 
</Grid> 
<JWindow> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void btn Click(object sender, RoutedEventArgs e) 


| 
1 


MessageBox.Show(btn.DataContext. ToString()); 


运行 效果 如 图 6-14 所 示 。 


š ' DataContext 














图 6-14 ”属性 值 治 UI 元 系 树 同 下 传递 


在 实际 工作 中 DataContext 的 用 法 是 非常 灵活 的 。 比 如 : 
(1) 当 UI 上 的 多 个 控件 都 使 用 Binding 关 注 同 一 个 对 象 时 ， 不 妨 使 
用 DataContext。 
(2) 当 作 为 Source 的 对 象 不 能 被 直接 访问 的 时 候 比如 B 窗 体内 
的 控件 想 把 A 窗 体内 的 控件 当 作 目 己 的 Binding 源 时 ， 但 A 窗 体内 的 控件 
是 private 访 问 级 别 ， 这 时 候 束 可 以 把 这 个 控件 (或 者 控件 的 值 ) 作 为 窗 
体 A 的 DataContext (这 个 属性 是 public 访 问 级 别 的 ) 从 而 暴露 数据 。 
形象 地 说 ， 这 时 候 外 层 容器 的 DataContext 就 相当 于 一 个 数据 的 “ 制 | 
高 点 ”， 只 要 把 数据 放 上 去 ， 列 的 元 又 了 驳 都 能 看 见 。 另 外 ，DataContext 
TUNIS ， 我 们 可 以 使 用 Binding 把 它 关 联 到 一 个 数据 源 





6.3.7 ”使 用 集合 对 象 作为 列表 控件 的 ItemsSource 


有 了 DataContext 的 知识 作 基 础 ， 我 们 再 来 看 看 把 集合 类 型 对 象 作 为 
Binding 源 的 情况 。 

WPF 中 的 列表 式 控件 们 派生 上 自 ItemsControl 类 ， 自 然 也 就 继承 了 
ItemsSource 这 个 属性 。ItemsSource 属 性 可 以 接收 一 个 IEnumerable 接 口 派 
生 类 的 实例 作为 目 己 的 值 〈 所 有 可 被 迭代 通 历 的 集合 都 实现 了 这 个 接 
口 ， 包 括 数 组 、List<T> 等 ) 。 每 个 ItemsControl 的 派生 类 都 具有 自己 对 
MHZ HA (tem Container) ， 例 如 ，ListBox 的 条 目 容 器 是 
ListBoxItem、ComboBox 的 条 上 日 容器 是 ComboBoxItem。ItemsSource 里 存 
放 的 是 一 条 一 条 的 数据 ， 要 想 把 数据 显示 出 来 需要 为 它们 穿 上 “外 衣 ”， 
条 日 容器 束 起 到 数据 外 衣 的 作用 。 怎 样 让 每 件数 据 外 衣 与 它 对 应 的 数据 
条 目 关联 起 来 呢 ? 当然 是 依靠 Binding! 只 要 我 们 为 一 个 ItemsControl 对 
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据 元 素 、 为 每 个 数据 元 素 准 备 一 个 条 目 Er 并 使 用 Binding 在 条 日 容 
句 与 数据 元 系 之 间 建 立 起 关联 。 让 我 们 看 这 样 一 个 例子 : 

它 的 UI 代 但 如 下 : 


«Window x:Class="WpfApplication1. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Binding Source" Height-240" Width-" 300 > 

sStackPanel x: Name-"stackPanel" Background" LightBlue"? 
<TextBlock Text Student [D:" FontWeight-" Bold" Margin- 5" /> 
«TextBox x:Name-"textBoxId" MargIn= 3 /> 
<TextBlock Text= Student List FontWelght= Bold Margin-"5" /> 
<ListBox x:Name="listBoxStudents" Height="110" Margin="5" /> 
</StackPanel> 
«Window? 


效果 如 图 6- 15 所 不 。 


Z Binding Source 








图 6-15 ”UI 效果 
我 们 要 实现 的 效果 是 把 一 个 List<Student> 集 合 的 实例 作为 ListBox 的 


ItemsSource， 让 ListBox 显 示 Student 的 Name 并 使 用 TextBox 显 示 ListBox 
当前 选中 条 日 的 1d。 为 了 实现 这 样 的 功能 ， 我 们 需要 在 Window1 的 构造 
AX 中 与 几 行 代码 : 


public Windowl() 


Í 
1 


InitializeComponent(); 


I| 准备 数据 源 
List<Student> stuList = new List<Student>() 
new Student()/Id-0, Name="Tim", Age=29}, 
new Student()/Id71, Name="Tom", Age=281. 
new Student()/1d-2, Name=" Kyle", Age-27], 
new Student()/Id73, Name= Tony", Age-26]. 
new Student()/Id74, Name-" Vina", Age-25]. 
new Student()/Id-5, Name= Mike", Age-24]. 


I| 3 ListBox 12 & Binding 
this.listBoxStudents.ItemsSource = stuList; 
this.listBoxStudents.DisplayMemberPath = "Name"; 


Il 为 TextBox 设置 Binding 
Binding binding = new Binding("SelectedItem.Id") | Source = this.listBoxStudents 上 
this.textBoxId.SetBinding( TextBox. TextProperty, binding); 

| 


运行 的 效果 如 图 6-16 所 示 。 


| a Binding Source 




















图 6-16 “运行 效果 


你 可 能 会 想 : 这 个 例子 里 并 没有 看 到 你 刚才 说 的 Binding。 实 际 
上 ，“this.listBoxStudents.DisplayMemberPath="Name";” 这 人 句 代 码 还 是 露 
出 了 一 些 蛛丝马迹 。 注 意 到 它 包含 Path” 这 个 单词 了 吗 ? 这 说 明 它 是 一 
个 路 人 笃 。 当 DisplayMemberPath 属 性 被 赋值 后 ，ListBox 在 获得 
ItemsSource 的 时 候 束 会 创建 等 量 的 ListBoxItem 并 以 DisplayMemberPath 
属性 值 为 Path 创 建 Binding，Binding 的 目标 是 ListBoxItem 的 内 容 插件 

(实际 上 是 一 个 TextBox， 下 面 就 会 看 到 )。 

如 采 在 ItemsControl 类 的 代码 里 侧根 问 底 ， 你 会 友 现 这 个 创建 
Binding 的 过 程 是 在 DisplayMemberTemplateSelector 类 的 SelectTemplate 方 
法 里 完成 的 。 这 个 方法 的 定义 格式 如 下 : 


public override DataTemplate SelectTemplate(object item, DependencyObject container) 
| 
I| ERAS... 
| 
在 这 里 我 们 倒 不 必 关 心 它 的 完整 内 容 ， 注 意 到 它 的 返回 值 了 吗 ? 是 

一 个 DataTemplate 类 型 的 值 。 数 据 的 “外 衣 ” 束 是 由 DataTemplate 容 上 
的 ! 当 我 们 没有 为 temsControl 显 式 地 指定 DataTemplate 时 SelectTemplate 
方法 就 会 为 我 们 创建 一 个 默认 的 (也 是 最 简单 的 ) DataTemplate 一 一 就 





好 像 给 数据 穿 上 一 件 最 简 蛙 的 衣服 一 样 。 人 至 于 什么 是 DataTemplate 以 及 
这 个 方法 的 完整 代码 将 会 放 到 与 Template 相 关 的 章节 去 仔细 讨论 ， 这 
里 ， 我 们 只 关心 SelectTemplate 内 部 与 创建 Binding 相 关 的 几 行 代码 : 


FrameworkElementFactory text = ContentPresenter,CreateTextBlockFactory(); 

Binding binding = new Binding(); 

binding.Path = new PropertyPath( displarMemberPath); 

binding.StringFormat = stringFormat; 

text.SetBinding( TextBlock. TextProperty, binding); 
注意 

这 里 只 对 新 创建 的 Binding 设 是 了 Path 而 没有 为 它 指定 Source， 紧 接着 束 把 它 天 联 到 了 

TextBlock 探 件 上 。 显 然 ， 要 想得到 Source， 这 个 Binding 要 问 UI 元 素 树 根 的 方向 去 寻找 包含 
_displayMemberPath 指 定 属 性 的 DataContext。 


最 后 ， 我 们 再 看 一 个 显 式 地 为 数据 设置 DataTemplate 的 例子 。 先 把 
C# 人 代码 中 的 “this.listBoxStudents.DisplayMemberPath="Name" ;一 句 删 
除 ， 再 在 XAML 中 添加 几 行 代码 ，ListBox 的 ItemTemplate 属 性 (继承 自 
ItemsControl 类 ) 的 类 型 是 DataTemplate， 下 面 的 代码 就 是 我 们 为 Student 
类 型 实例 “ 量 号 定做 ”衣服 : 


«Window x:Class="WpfApplicationl.Windowl" 
xmlns-"http://schemas.microsoft.com/ winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"Binding Source" Height-"240" Width-"300" Loaded-"Window Loaded"? 
«StackPanel x:Name-"stackPanel" Background-"LightBlue" 
<TextBlock Text-" Student ID:" FontWeight-" Bold" Margin- > /> 
«TextBox x:Name-"textBoxId" Margin- 3 /> 
<TextBlock Text-" Student List:" FontWeight-"Bold" Margin-"5" /> 
«ListBox x:Name-"listBoxStudents" Height-" 1 10" Margin-" 5 
«ListBox.ItemTemplate 
«Data Template» 
«StackPanel Orientationz" Horizontal" 
<TextBlock Textz" [Binding PathzId]" Widthz"30" /> 
<TextBlock Textz" [Binding PathzName]" Widthz" 60" /> 
<TextBlock Text" [Binding Path-Age]" Widthz"30" /> 
«/StackPanel» 
«IDataTemplate» 
«JListBox.ItemTemplate» 
«JListBox? 
</StackPanel> 


</Window> 


运行 效 灯 如 图 6-17 所 示 。 








图 6-17 显示 为 数据 设置 DataTemplate 实 例 效 果 图 


注意 

最 后 特别 提醒 大 家 一 点 : 在 使 用 集合 类 型 作为 列表 控件 的 ItemsSource 时 一 般 会 考虑 使 用 
ObservableCollection<T> 代 蔡 List<T>， 因 为 ObservableCollection<T> 类 实现 了 
INotifyCollectionChanged 和 INotifyPropertyChanged 接 口 ， 能 把 集合 的 变化 立刻 通知 显示 它 的 列表 
控件 ， 改 变 会 立刻 显现 出 来 。 


63.8 ”使 用 ADO.NET 对 象 作 为 Binding 的 源 


在 .NET 开 发 中 ， 我 们 使 用 ADO.NET 类 对 数据 库 进 行 操作 。 常 见 的 
工作 是 从 数据 库 中 把 数据 读 取 到 DataTable 中 ， 再 把 DataTable 显 示 在 UI 
列表 控件 里 《如 成 绩 单 、 博 客 文章 列表 、 论 坛 帖 子 列 表 等 ) . J Sr EY 
行 的 软件 染 构 中 并 不 把 DataTable 的 数据 直接 显示 在 UI 列表 控件 里 而 是 
先 通 过 LINQ 等 手段 把 DataTable 里 的 数据 转换 成 恰当 的 用 户 自 定义 类 型 
集合 ， 但 WPF 也 支持 在 列表 控件 与 DataTable 之 间 和 直接 建 六 Binding。 

假设 我 们 已 经 获得 了 一 个 DataTable 的 实例 ， 并 且 它 的 数据 内 容 如 表 
6-1 所 示 。 

表 6-1 一 个 DataTable 实 例 的 数据 内 容 
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现在 我 们 把 它 显 示 在 一 个 ListBox 里 。UI 部 分 的 XAML 代 码 如 下 : 


«Window x:Class="WpfApplicationl.Windowl" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Titlez"DataTable Source" Height-"206" Width="250"> 
«StackPanel Backeround-" LightBlue" 

«ListBox x:Name-"listBoxStudents" Height-" 130" Margin-^5" /> 

«Button Content-"Load" Height-"25" Margin" 5,0" Click-"Button. Click" /> 
</StackPanel> 

</Window> 


C# 部 分 我 们 只 给 出 Button 的 Click 事 件 处 理 器 : 
private void Button. Click(object sender, RoutedEventArgs e) 
| 


/获取 DataTable 实例 
DataTable dt = this.Load(): 


this.listBoxStudents.DisplayMemberPath = "Name"; 
this.listBoxStudents.ItemsSource = dt.DefaultView; 


运行 效果 如 图 6-18 所 示 。 


x a DataTable Source 





图 6-18 ”运行 效果 


其 中 最 重要 的 一 句 代 三 
是 “this.listBoxStudents.ItemsSource=dt.DefaultView:”。DataTable 的 
DefaultView 属 性 是 一 个 DataView 类 型 的 对 象 ，DataView 类 实现 了 
IEnumerable 接 口 ， 所 以 可 以 被 赋值 给 ListBox.ItemsSource 属 性 。 

多 数 情 况 下 我 们 会 选择 ListView 控 件 来 显示 一 个 DataTable， 需 要 做 
的 改动 也 不 是 很 大 。XAML 部 分 的 代码 如 下 : 


«Window x:Class=" WpfApplicationl.Windowl1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http:/schemas.microsoft.com/winfx/2006/xaml" 
Title="DataTable Source" Height-"206" Width="250"> 

«StackPanel Backeround-" LightBlue" 
«ListView x:Name-"listViewStudents" Height-" 130" Margin="5"> 
«ListView. View? 
«GridView? 
«GridViewColumn Headerz "Id" Widthz "60" 
DisplayMemberBinding- " [Binding Id)" /» 
«GridViewColumn Headerz" Name" Widthz" 80" 
DisplayMemberBinding-" [Binding Name]" /> 
«Grid ViewColumn Headerz" Age" Widthz" 60" 
DisplayMemberBindingz " [Binding Age!" /> 
</GridView> 
«JListView. View? 
«JListView? 
«Button Content-" Load" Height-"25" Margin-" 5,0" Click-"Button. Click" /> 
</StackPanel> 


«Window? 


注意 

这 里 有 几 点 需要 注意 的 地 方 : 

首先 ， 从 字面 上 理解 ListView 和 GridView 应 该 是 同一 级 别 的 控件 ， 实 际 上 远 非 这 样 ! 
ListView 是 ListBox 的 派生 类 而 GridView 是 ViewBase 的 派生 类 ，ListView 的 View 属 性 是 一 个 
ViewBase 类 型 的 对 象 ， 所 以 ，GridView 可 以 作为 ListView 的 View 来 使 用 而 不 能 当 作 独立 的 控件 
来 使 用 。 这 里 使 用 的 理念 是 组 合 模式 ， 即 ListView“ 有 一 个 ”View， 至 于 这 个 View 是 GridView 还 
是 其 他 什么 类 型 的 View 则 由 程序 员 自 由 选择 目前 只 有 一 个 GridView 可 用 ， 估 计 微 软 在 这 里 
还 会 有 扩展 。 


注意 

其 次 ，GirdView 的 内 容 属性 是 Columns， 这 个 属性 是 GridViewColumnCollection 类 型 对 
象 。 因 为 XAML 文 持 对 内 容 属性 的 简写 ， 所 以 省 略 了 <GridView.Columns>... 
</GridView.Columns> 这 层 标签 ， 直 接 在 <GridView> 的 内 容 部 分 定义 了 三 个 GridViewColumn 对 
象 。GridViewColumn 对 象 最 重要 的 一 个 属性 是 DisplayMemberBinding 〈 类 型 为 BindingBase) ， 
使 用 这 个 属性 可 以 指定 这 一 列 使 用 什么 样 的 Binding 去 关联 数据 一 一 这 与 ListBox 有 点 不 同 ， 
ListBox 使 用 的 是 DisplayMemberPath 属 性 〈 类 型 为 string) 。 如 果 想 用 更 复杂 的 结构 来 表示 这 一 
列 的 标题 (Header) 或 数据 ， 则 可 为 GridViewColumn 设 置 HeaderTemplate 和 CellTemplate 属 性 ， 
它们 的 类 型 都 是 DataTemplate。 

















C# 代 但 中 ，Button 的 Click 事 件 处 理 噩 基本 上 没有 变化 : 


private void Button Click(object sender, RoutedEventArgs e) 


| 
|| 获取 Data Table 实例 


DataTable dt = this.Load(); 


this.list ViewStudents.ItemsSource = dt.DefaultView; 


| 
运行 效果 如 图 6-19 所 示 。 


| a DataTable Source 











图 6-19 ”运行 效果 


通过 上 面 的 例子 我 们 已 经 知道 DataTable 对 象 的 DefaultView 属 性 可 
以 作为 ItemsSource 使 用 。 拿 DataTable 直 接 作 为 ItemsSource 可 以 吗 ? 如 果 


把 代码 改 成 这 样 : 


private void Button Click(object sender, RoutedEventArgs ë) 
| 
| 


路 获取 DataTable 实例 
DataTable dt = this.Load(): 


this list ViewStudents.ItemsSource = dt; 


八 . 4 日 M x EHE CH 
AN SIT VER VA: 
Cannot implicitly convert type '"System.Data.DataTable' to "System.Collections.IEnumerable, An explicit conversion exists 
(are you missing a cast?) 


显然 ，DataTable 不 能 直接 拿 来 为 ItemsSource 赋 值 。 不 过 ， 当 你 拒 
DataTable 对 象 放 在 一 个 对 象 的 DataContext 属 性 里 ， 并 把 ItemsSource 与 
一 个 既 没 有 指定 Source 又 没有 指定 Path 的 Binding 关 联 起 来 时 ，Binding 却 
能 目 动 找到 它 的 DefaultView 并 当 作 目 己 的 Source 来 使 用 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
| 


省 获取 DataTable 实例 
DataTable dt = this.Load(); 


this.listViewStudents.DataContext = dt; 
this.listViewStudents.SetBinding(ListView.ItemsSourceProperty, new Binding()): 


| 
Í 


所 以 ， 如 果 你 在 代码 中 发 现 把 DataTable 而 不 是 DefaultView 作 为 
DataContext 的 值 ， 并 且 为 ItemsSource 设 置 一 个 既 无 Path 又 无 Source 的 
Binding 时 ， 生 万 列 感 沉迷 惑 。 


63.9 ”使 用 XML 数 据 作为 Binding 的 源 


运 今 为 止 ，.NET Framework 提 供 了 两 父 处 理 XML 数 据 的 类 库 : 

e 和 侍 合 DOM (Document Object Modle， 文 档 对 象 模型 ) 标准 的 类 
FE: 包括 XmlDocument、XmlElement、XmlNode、XmlAttribute 等 类 。 
这 和 套 关 库 的 特点 是 中 规 中 窍 、 功 能 强大 ， 但 也 背负 了 太 多 XML 的 传统 


和 复杂 。 


e CLINQ CLanguage-Integrated Query， 语 言 集成 查询 ) 为 基础 的 
XKE: 包括 XDocument、XElement、XNode、XAttribute 等 类 。 这 做 类 库 
的 特点 是 可 以 使 用 LINQ 进 行 租 询 和 操作 ， 方 便 快 捷 。 

本 小 节 我 们 主要 讲解 基于 DOM 标 准 的 XML 类 库 ， 基 于 LINQ 的 部 分 
我 们 放 在 接 下 来 的 一 市 里 讨论 。 

现代 程序 设计 只 要 涉及 数据 传输 束 离 不 开 XML， 因 为 大 多 数 数 据 
传输 都 基于 SOAP (Simple Object Access Protocol, EX 2x Uj iH] VP.) 
相关 的 协议 ， 而 SOAP 又 是 通过 将 对 象 序列 化 为 XML 文本 进行 传输 。 
XML 文本 是 树 形 结构 的 ， 所 以 XML 可 以 方便 地 用 于 表示 线性 集合 《如 
Array、List 等 ) 和 树 形 结构 数据 。 
需要 注意 的 是 ， 当 使 用 XML 数据 作为 Binding 的 Source 时 我 们 将 使 用 XPath 属性 而 不 是 Path 
属性 来 指定 数据 的 来 源 。 


先 来 看 一 个 线性 集合 的 例子 。 下 面 的 XML 文本 是 一 组 学 生 的 信息 
《假设 存放 在 DANRawData.xml 文 件 中 ) ， 我 要 把 它 显 示 在 一 个 ListView 
控件 里 : 


«?xml version="1.0" encoding-"utf-8" 1> 





«StudentList? 
«Student Id-" ] > 
<Name> Timz/Name- 
</Student> 


«Student Id="2"> 
<Name> [om</Name> 
</Student> 
«Student Id="3"> 
<Name> VIna</Name> 
</Student> 
«Student Id="4"> 
<Name>Emily</ Name> 
</Student> 
</StudentList> 


程序 的 XAML 部 分 如 下 : 


«Window x:Class-" WpfApplicationl Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title= XML Source" Height-"205" Width-"240"5 
«StackPanel Background-" LightBlue"» 
«ListView x:Name-"listViewStudents" Height-" 130" Margin-"5"» 
«ListView. View? 
«GrndView? 
«Grid ViewColumn Header-" Id" Width-"80" 
DisplarMemberBinding-" Binding XPathz€& Id)" /> 
«Grid ViewColumn Header-" Name" Width" 20" 
DisplayMemberBinding= [Binding XPathzName]" > 
</GridView> 
</ListView. View 
</ListView> 
«Button Content="Load" Click="Button_Click" Height-"25" Margin="5,0" /> 
</StackPanel> 


</Window> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 
I 
XmlDocument doc = new XmlDocument(); 
doc.Load((" D: RawData.xml"); 


XmlDataProvider xdp = new XmlDataProvider(); 
xdp.Document = doc; 


I| 使 用 XPath fed EAR IR 
I| BUE SS 38 98 2H Student 
xdp.XPath  (a" |StudentList/Student"; 


this.listViewStudents.DataContext = xdp; 
this.listViewStudents. SetBinding(ListView.ItemsSourceProperty, new Binding()); 


| 
程序 运行 效 来 如 图 6-20 所 示 。 





| 8 ' XML Source 














图 6-20 “运行 效果 


XmlDataProvider 还 有 一 个 名 为 Source 的 属性 ， 可 以 用 它 直接 指定 
XML 文 档 所 在 的 位 置 (无 论 XML 文 档 存 储 在 本 地 硬盘 还 是 网 络 上 ) ， 
所 以 ，Click 事 件 处 理 器 也 可 以 写成 这 样 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
XmlDataProvider xdp = new XmlDataProvider( ); 
xdp.Source = new Uri(? "DARawData.xml"); 
xdp.XPath = (a /StudentList/Student"; 


this.listViewStudents.DataContext = xdp; 


this.listViewStudents.SetBinding(ListView.ItemsSourceProperty, new Binding()); 


XAML/ANXAS F 5S8 P 5) xe*"DisplayMemberBinding-" {Binding 
XPath-(2Id) ;"fI*DisplayMemberBinding-" (Binding XPath-Name]";", 
EMAA 7jGridViewH P4 /ilfRH] f KEMLER AR Hw, EH @ 
符号 加 字符 串 表 示 的 是 XML 元 素 的 Attribute， 不 加 @ 符 号 的 字符 串 表 示 
的 是 子 级 元 系 。 

XPath 作为 XML 语言 的 功能 有 看 一 整套 语法 ， 讲 述 这 些 语法 走出 了 
本 书 的 范围 。MSDN 里 有 对 XPath 很 详尽 的 讲解 可 以 查阅 。 

XML 语言 可 以 方便 地 表示 树 形 数据 结构 ， 下 面 的 例子 征 使 用 
TreeView 探 件 来 显示 拥有 在 和 干 层 目录 的 文件 系统 ， 而 且 ， 这 次 是 把 
XML 数据 和 XmlDataProvider 对 象 直接 写 在 XAML 人 代码 里 。 代 码 中 用 到 
了 HierarchicalDataTemplate 类 ， 这 个 类 具有 有 名 为 ItemsSource 的 属性 ， 可 
见 由 这 种 Template 展 示 的 数据 是 可 以 拥有 子 级 集合 的 。 代 三 如 下 : 





«Window x:Class-"WpfApplication] Window" 
xmlins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.mierosoft.com/winfx/2006/xaml" 
Title-" XML Source" Height-"210" Width="260"> 

«Window.Resources 
«XmlDataProvider x:Key-"xdp" XPathz"FileSystem/Folder" > 
«x:XData» 
«FileSystem xmlns=""> 
«Folder Name-"Books" 
«Folder Name- Programming" 
«Folder Name-" Windows" 
«Folder Name-"WPF" /> 
«Folder Name-"MFC" /> 
«Folder Name-"Delphi" /> 
</Folder> 
</Folder> 
«Folder Name="Tools"> 
<Folder Name="Development" /> 
«Folder Name="Designment" /> 
<Folder Name="Players" /> 
</Folder> 
</Folder> 
< FileSystem> 
</x:XData> 
</XmlDataProvider> 
</Window.Resources> 


<Grid> 
<TreeView ItemsSourcez" [Binding Souree=[StaticResource xdp}}"> 
<TreeView.ltemTemplate> 
<HierarchicalData Template ItemsSource-" [Binding XPath-Folder]" 7 
<TextBlock Textz" [Binding XPathz(? Name]" /> 
x/HierarchicalData Template 
/TreeView.ItemTemplate- 
< TreeView> 
sand» 
«Window» 


注意 
需要 注意 的 是 ， 如 果 把 XmlDataProvider 直 接 写 在 XAML 人 代码 里 ， 那 么 它 的 XML 数据 需要 
放 在 <x:XData>...</x:XData> 标 签 里 。 


由 于 这 个 例子 涉及 的 StaticResource 和 HierarchicalDataTemplate， 都 
征 后 面 的 内 容 ， 所 以 相对 比较 难 恒 ， 等 学 习 完 后 面 的 Resource 和 
Template 相 关 和 章节 有 再 回来 看 便 会 了 然 于 胸 。 

程序 运行 效 末 如 图 6-21 所 示 。 











B' XML Source 
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图 6-21 ”运行 效果 
6.3.10 ”使 用 LINQ 检 索 结 果 作 为 Binding 的 源 


目 3.0 版 开始 ，.NET Framework 开 始 文 持 LINQ (Language-Integrated 
Query， 语 言 集成 查询 ) ， 使 用 LINQ， 我 们 可 以 方便 地 操作 集合 对 象 、 
DataTableX] MXML x rfj A zJ) C gode f JL E foreach E E 
EAR X73 f SC 1 18 f8] P HJ 25, 

LINQ 查 询 的 结果 是 一 个 IEnumerable<T> 类 型 对 象 ， 而 
IEnumerable<T> 又 派生 自 IEnumerable， 上 所 以 它 可 以 作为 列表 控件 的 
ItemsSource 来 使 用 。 

我 创建 了 一 个 名 为 Student 的 类 : 


public class Student 


| 
public int Id [ get; set; ] 
public string Name | get; set; } 
public int Age | get; set; | 

| 


又 设计 了 如 下 的 UI 用 于 在 Button 补 单 击 的 时 候 显 示 一 个 Student 集 合 
类 型 对 象 。 


«Window x:Class="WpfApplication].Windowl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-" LINQ Source" Height-"220" Width= 280 > 
«StackPanel Background-" LightBlue"» 
«ListView x:Name-"list ViewStudents" Height-" 143" Margin="5"> 
«ListView. View? 
<GridView> 
<GridViewColumn Header="Id" Width="60" 
DisplayMemberBinding-" [Binding Idj" /> 
«Grid ViewColumn Header-" Name" Width-" 100" 
DisplayMemberBinding-" | Binding Name!" /> 
«GndViewColumn Header-" Age" Width-" 80" 
DisplayMemberBinding-" | Binding Agej" /> 
</GridView> 
«ListView, View? 
</ListView> 
«Button Content="Load" Height-"25" Margin="5,0" Click-"Button Click" /> 
</StackPanel> 
</Window> 


先 来 看 俘 询 集合 对 象 。 要 从 一 个 已 经 填充 好 有 的 List<Student> 对 象 中 
检索 出 所 有 名 字 以 字母 T 开 头 的 和 学生， 代码 如 下 : 


private void Button. Click(object sender, RoutedEventArgs e) 


| 
l 


List<Student> stuList = new List<Student>() 
new Student()/Id-0, Name="Tim", Age=29}, 
new Student()!1d=1, Name="Tom", Age=281. 
new Student()/1d-2, Name=" Kyle", Age-27], 
new Student()/Id73, Name= Tony", Age=26}, 
new Student()/Id-4, Name-" Vina", Age-25]. 
new Student()/Id-5, Name= Mike", Age-24], 


this.listViewStudents.ItemsSource = from stu in stuList where stu.Name.StartsWith(" T") select stu; 


| 
p 姑 果 数据 存放 在 一 个 已 经 好 的 DataTable 对 象 里 ， 则 代码 是 这 


private void Button Click(object sender, RoutedEventArgs e) 
| 
DataTable dt = this.GetData Tablet); 


this.listViewStudents.ItemsSource = 
from row in dt.Rows.CasteDataRow»() 
where Convert. ToString(row| "Name" ]).StartsWith(" T") 
select new Student() 
| 
Id = int.Parse(row|"'Id'' | ToString()), 
Name = row[" Name" |. ToString(), 


Age = int.Parse(row|"Age" | ToString()) 


如 果 数 据 存 储 在 XML 文件 里 (D:\RawData.xml) 如 下 : 


«xml version="1.0" encoding-"utf-8" ?> 
<StudentList> 
<Class> 
«Student Id-"0" Name-" Tim" Age="29"/> 
«Student Id-"]" Name-"Tom" Age="28"/> 
«Student Id="2" Name-"Mess" Age="27" > 
«i Class? 
«Class 
«Student Id-"3" Name-"Tony" Age-"26"/» 
<Student Id-"4" Name= Vina" Age-"25"/5 
«Student Id-" 5" Name-"Emily" Age="24"/> 
</Class> 
</StudentList> 


则 代码 会 是 这 样 (注意 xdoc.Descendants("Student") 这 个 方法 ， 它 可 
以 跨越 XML 的 层级 ) : 


private void Button Click(object sender, RoutedEVentAres e) 
| 
i 


XDocument xdoc = XDocument.Load(@" D:\RawData.xml"); 


this.listViewStudents.]temsSource = 
from element in xdoc.Descendants( "Student ") 
where element.Attribute( " Name" ).Value.StartsWith(" T") 
select new Student() 
| 
Id = int.Parse(element.Attribute("Id"). Value), 
Name = element.Attribute(" Name"). Value, 
Age = int.Parse(element.Attrihute(" Age"). Value) 


程序 的 运行 效 来 如 图 6-22 所 示 。 


B ' LINO Source 








图 6-22 ”运行 效果 
6.3.11 使 用 ObjectDatapProvider 对 象 作 为 Binding 的 Source 


理想 的 情况 下 ， 上 游程 序 员 把 英 姑 计 好 、 使 用 属性 把 数据 骏 露 出 
来 ， 下 游程 序 员 把 这 些 关 的 实例 作为 Binding 的 Source、 把 属性 作为 
Binding 的 Path 来 消费 这 些 类 。 但 很 难 你 证 一 个 类 的 所 有 数据 都 使 用 属性 
骏 露 出 来 ， 比 如 我 们 需要 的 数据 可 能 是 方法 的 返回 但 。 而 重新 设计 撒 层 
美的 风险 和 成 本 会 比较 高 ， 况 且 黑 盒 引 用 美 库 的 情况 下 我 们 也 不 可 能 更 
改 己 经 编译 好 的 类 ， 这 时 候 束 需要 使 用 ObjectDataProvider 来 包装 作为 
Binding 源 的 数据 对 象 了 。 

ObjectDataProvider， 顾 名 思 义 整 是 把 对 象 作 为 数据 源 提 供给 
Binding。 前 面 还 提 到 过 XmlDataProvider， 也 就 是 把 XML 数据 作为 数据 
源 提供 给 Binding。 这 两 个 类 的 父 类 都 是 DataSourceProvider 抽 象 类 。 
现在 有 一 个 名 为 Calculator 的 类 ， 它 具有 计算 加 、 减 、 乘 、 除 的 方 
法 : 


class Calculator 


| 
l 


I| 加 法 
public string Add(string arg], string arg2) 


| 
I 


double x = 0) 
double y = 0); 
double z = 0); 
if (double. TryParse(argl, out x) && double. TryParse(arg2, out y)) 
| 
Z-XTy, 
return z.ToString(); 


] 


return "Input Error! ; 


I| HARI. 


我 们 先 写 一 个 非常 简单 的 小 例子 来 了 解 ObjectDataProvider 类 。 随 便 
新 建 一 个 WPF 项 目 ， 然 后 在 UI 里 玖 加 一 个 Button，Bnutton 的 Click 事 件 处 
JBE ZS QH F: 


private void Button Click(object sender, RoutedEventArgs e) 
| 
ObjectDataProvider odp = new ObjectDataProvider(); 
odp.ObjeetInstance = new Calculator); 
odp.MethodName = "Add"; 
odp.MethodParameters. A dd(" 100"): 
odp.MethodParameters. Add(" 200"); 


MessageBox.Show(odp.Data. ToString()); 


运行 程序 、 单 击 Button， 效 果 如 网 6-23 所 示 。 


ObiectDataProvider 











图 6-23 ”运行 效果 


通过 这 个 程序 我 们 可 以 了 解 到 ObjectDataProvider 对 象 与 被 它 包 装 的 
对 象 关系 如 图 6-24 所 示 。 
传 入 参数 


L. MethodParameters 属性 









BOR 
( Data 属性 ) 





被 包装 对 象 
uti 


( ObjectInstance /if 


ObjectDataProvider 对 象 
图 6-24 ”ObjectDataProvider 对 应 与 被 包装 对 象 的 关系 


了 解 了 ObjectDataProvider 的 使 用 方法 ， 现 在 让 我 们 看 看 如 何 把 它 当 
作 Binding 的 Source 来 使 用 。 程 序 的 XAML 代 人 码 和 截图 如 下 : 


«Window x:Class-"WpfApplicationl. Window" 
xmlns-"http:/schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"ObjectDataProvider Source" Height-" 135" Width= 300" 

<StackPanel Background-" LightBlue"» 
«TextBox x:Name-"textBoxArg]" Margin-" 5" /> 
«TextBox x:Name-"textBoxArg2" Margin-"5" /> 
«TextBox x:Name- "textBoxResult" Margin-" 5" /> 
</StackPanel> 
</Window> 


运行 效果 如 图 6-25 所 示 。 








图 6-25 “运行 效果 


这 个 程序 需要 实现 的 功能 是 在 上 和 面 两 个 TextBox 输 入 数字 后 ， 第 3 个 
wr 实时 地 显示 数字 的 和 。 把 代码 写 在 一 个 名 为 SetBindiny 的 方法 
， 然 后 在 窗 体 的 构造 希 里 调用 这 个 方法 : 


public Window1() 

| 
InitializeComponent(); 
this.SetBinding(); 


private void SetBinding() 

| 
中 创建 并 配置 ObjectDataProvider X] $& 
ObjectDataProvider odp = new ObjectDataProvider(); 
odp.ObjectInstance = new Calculator(); 
odp.MethodName = "Add"; 
odp.MethodParameters.Add("0"); 
odp.MethodParameters.Add("0"); 


中 E] ObjectDataProvider X| 5: 7j Source 创建 Binding 
Binding bindingToArgl = new Binding(" MethodParameters[0]") 
í 
Source = odp, 
BindsDirectlyToSource = true, 
UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged 


Binding bindingToArg2 = new Binding(" MethodParameters|1]") 
| 
Source = odp, 
BindsDirectlyToSource = true, 
UpdateSourceTrigger ^ UpdateSourceTrigger.PropertyChanged 


Binding bindingToResult = new Binding(".") | Source = odp }; 


中 将 Binding 关联 到 UI z E 

this.textBoxArg .SetBinding( TextBox.TextProperty, bindingToArgl); 
this.textBoxArg2.SetBinding( TextBox. TextProperty, binding ToArg2); 
this.textBoxResult.SetBinding( TextBox.TextProperty, binding ToResult); 


让 我 们 来 分 析 一 下 这 个 方法 。 前 面 说 过 ，ObjectDataProvider 类 的 作 
用 是 用 来 包 冯 一 个 以 方法 又 露 数据 的 对 象 ， 这 里 我 们 先是 创建 了 一 个 
ObjectDataProvider 对 象 ， 然 后 用 一 个 Calculator 对 象 为 其 ObjectInstance 属 
性 赋值 一 一 这 束 把 一 个 Calculator 对 象 包 涛 在 了 ObjectDataProvider 对 象 
里 。 还 有 男 外 一 个 办 法 来 创建 人 彼 包 涛 的 对 象 ， 那 束 是 告诉 
ObjectDataProvider 将 被 包 厂 对 象 的 类 型 和 和 布 望 调用 的 构造 项 ， 让 
ObjectDataProvider 目 己 去 创建 被 包 痛 对 象 ， 代 人 码 大 概 是 这 样 : 


Il... 
odp.ObjectType = typeof( YourC lass); 





odp.ConstructorParameters. Add(arg] ): 
odp.ConstructorParameters. A dd(arg? J; 
ih. 


为 在 XAML H 8] RU HE EG. iE, MAURE 
EÆXAMLIR rn fi Hoop dB E DS TRUM as BJ NT e 

接 看 ， 我 们 使 用 MethodName 属 性 指定 将 要 调用 Calculator 对 象 中 名 
为 Add 的 方法 一 一 问题 又 来 了 ， 如 果 Calculator 类 里 有 多 个 重 载 的 Add 方 
法 应 该 怎么 区 分 呢 ? 我 们 知道 ， 重 载 方 法 的 区 别 在 于 参数 列表 ， 案 接 看 
的 两 句 代 人 码 同 MethodParameters 属 性 中 加 入 了 两 个 string 类 型 的 对 象 ， 这 
束 相 当 于 告诉 ObjectDataProvider 对 象 去 调用 Calculator 对 象 中 具有 两 个 
string 类 型 参数 的 Add 方 法 ， 换 人 句 话 说 ，MethodParameters 属 性 是 类 型 敏 
感 的 。 

准备 好 数据 源 后 ， 我 们 开始 创建 Binding。 在 前 面 我 们 已 经 学 习 过 
使 用 索引 器 作为 Binding 的 Path， 第 一 个 Binding 它 的 Source 是 
ObjectDataProvider 对 象 、Path 是 ObjectDataProvider 对 象 
MethodParameters 属 性 所 引用 的 集合 中 的 第 一 个 元 率 。 
BindsDirectlyToSource=true 这 人 句 的 意思 是 告诉 Binding 对 象 只 负责 把 从 UIl 
元 素 收 集 到 的 数据 写 入 其 直接 Source 〈 即 ObjectDataProvider 对 象 ) 而 不 
是 被 ObjectDataProvider 对 象 包装 看 的 Calculator 对 象 。 同 时 ， 
UpdateSourceTrigger 属 性 被 设置 为 一 有 更 独立 刻 将 值 传 回 Source。 第 二 
个 Binding 对 象 是 第 一 个 的 翻版 ， 只 是 把 Path 指 同 了 第 二 个 参数 。 第 三 个 
Binding 对 象 仍然 使 用 ObjectDataProvider 对 象 作为 Source， 但 使 用 “.” 作 为 
Path 一 一 前 面 说 过 ， 当 数据 源 本 吴 耽 代表 数据 的 时 候 束 使 用 “.” 作 Path， 
并 且 “.” 在 XAML 代 码 里 可 以 省 略 不 写 。 
在 把 ObjectDataProvider 对 象 当 作 Binding 的 Source 来 使 用 时 ， 这 个 对 象 本 刁 束 代表 了 数 
据 ， 所 以 这 里 的 Path 使 用 的 是 “.” 而 非 其 Data 属 性 。 











最 后 一 步 是 把 Binding 对 象 关 联 到 3 个 TextBox 对 象 上 。 完 成 后 在 窗 
中 调用 这 个 方法 ， 程 序 运行 的 时 候 束 能 看 到 如 图 6-26 所 示 
y A " 





图 6-26 “运行 效果 


一 般 情 况 下 ， 数 据 从 哪里 来 哪里 加 是 Binding 的 Source、 数 据 到 哪里 
去 哪里 束 应 该 是 Binding 的 Target。 按 这 个 理论 ， 有 前 两 个 TextBox 应 该 是 
ObjectDataProvider 对 象 的 数据 源 ， 而 ObjectDataProvider 对 象 义 是 最 后 一 
个 TextBox 的 数据 产 。 但 实际 上 ， 三 个 TextBox 都 以 ObjectDataProvider 对 
象 为 数据 源 ， 只 是 前 两 个 TextBox 在 Binding 的 数据 流 回 上 做 了 限制 。 这 
样 做 的 原因 不 外 乎 有 两 个 : 

e ObjectDataProvider 的 MethodParameters 不 是 依赖 属性 ， 不 能 作为 
Binding 的 目标 。 

o 数据 驱动 UI 的 理念 要 求 尺 可 能 地 使 用 数据 对 象 作 为 Binding 的 
Source 而 把 UI 元 素 当 作 Binding 的 Target。 


6.3.12 ”使 用 Binding 上 的 RelativeSource 


当 一 个 Binding 有 明确 的 数据 来 源 时 我 们 可 以 通过 为 Source 或 
ElementName 赋 值 的 办 法 让 Bindng 与 之 关联 。 有 些 时 候 我 们 不 能 确定 作 
为 Source 的 对 象 叫 什么 名 字 ， 但 知道 它 与 作为 Binding 目 标的 对 象 在 UI 布 
局 上 有 相对 关系 ， 比 如 控件 自己 关联 上 自己 的 茶 个 数据 、 关 联 自己 某 级 容 
JAE ARRA 1990-22 s H Binding] RelativeSource/& FE. 

RelativeSource 属 性 的 数据 类 型 为 RelativeSource 类 ， 通 过 这 个 类 的 
几 个 静态 或 非 静 态 属性 我 们 可 以 控制 它 搜索 相对 数据 源 的 方式 。 下 面 这 
段 XAML 代 但 表示 的 是 多 层 布 局 控件 内 放置 看 一 个 TextBox: 


«Window x:Class-"WpfApplication]. Window |" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"RelativeSource" Height-"210" Width="210"> 

«Grid x:Name-"g1" Background-" Red" Margin-" 10^ 
«DockPanel x: Name-"d1" Background-" Orange" Margin-" 10" 
«ond x:Name-"g2" Background" Yellow" Margm= 10^» 
«DockPanel x: Name-"d2" Background-" LawnGreen" Margin-" 10" 
«TextBox x:Name-"textBox1" FontSize-"24" Margin" 0" /> 
< DockPanel> 
</Grid> 
</DockPanel> 
</Grid> 
</Window> 


布局 的 图 解 如 图 6-27 所 示 。 





| a` RelativeSourcel 


textBoxl 





图 6-27 多 层 布局 控件 内 有 一 个 TextBox 控 件 


我 们 把 TextBox 的 Text 属 性 关联 到 外 层 容 右 的 Name 属 性 上 。 在 窗 体 
的 构造 硕 里 添加 几 行 代 伍 : 


public Window!() 
| 


[nitializeComponent(J; 


RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor); 
rs. AncestorLevel = 1; 
rs. AncestorType  typeof(Grid); 
Binding binding = new Binding(" Name") | RelativeSource = rs }; 
this.textBox l.SetBinding( TextBox. TextProperty, binding); 

| 


或 在 XAML 中 插入 等 效 代码 : 


Text=" {Binding RelativeSource={RelativeSource FindAncestor, 


AncestorType- [x: Type Grid], AncestorLevel=1}, Path-Name]" 


AncestorLevel/&fETH Ré LA Binding H $r fF Zi Ex HJ Ez 2 fie E 
一 一 d2 的 偏 移 量 是 1、g2 的 偏 移 量 为 >， 依次 类 推 。AncestorType 属 性 告 
诉 Binding 寻 找 哪个 类 型 的 对 象 作 为 目 己 的 产 ， 不 是 这 个 类 型 的 对 象 会 
被 跳 过 。 上 面 这 段 代 码 的 意思 是 告诉 Binding 从 自己 的 第 一 层 依 次 向 外 
找到 第 一 个 Grid 类 型 对 象 后 把 它 当 作 目 己 的 源 。 运 行 效果 如 图 6-28 

ZN o 











图 6-28 ”运行 效果 


如 琳 把 代码 更 改 为 这 样 : 


public Windowl() 
| 


InitializeComponent(); 


RelativeSource rs = new RelativeSource( J; 
rs.AncestorLevel = 2; 
rs.AncestorType = typeof(DockPanel); 
Binding binding = new Binding(" Name") | RelativeSource = rs }: 
this.textBox Il SetBinding(TextBox.TextProperty, binding); 

| 

或 在 XAML 中 插入 等 效 代 但 : 
Text= [Binding RelativeSourcez[RelativeSource Ancestor Typez|x: Type DockPanel} AncestorLevel=2}, PathzName]" 


运行 效果 如 图 6-29 所 示 。 
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Kle-29 ”运行 效果 
如 果 TextBox 需 要 天 联 目 身 的 Name 属 性 ， 则 代码 应 访 是 这 样 : 
public Window) 
| 


InitializeComponent(); 


RelativeSource rs = new RelativeSource(); 
rs.Mode = RelativeSourceMode.Self; 
Binding binding = new Binding("Name") | RelativeSource = r$ }; 
this.textBox |l. SetBinding( TextBox. TextProperty, binding; 
| 


运行 效果 如 图 6-30 所 示 。 

















图 6-30 “运行 效果 


RelativeSource 关 的 Mode 属 性 的 类 型 是 RelativeSourceMode 枚 举 ， 它 
的 取 值 有 : PreviousData、TemplatedParent、Self 和 FindAncestor。 
RelativeSource 关 还 有 3 个 静态 属性 : PreviousData、Self 和 
TemplatedParent， 他 们 的 类 型 是 RelativeSource 类 。 实 际 上 这 3 个 静态 属 
性 束 是 创建 一 个 RelativeSource 实 例 、 把 实例 的 Mode 属 性 设置 为 相应 的 
值 ， 然 后 返回 这 个 实例 。 之 所 以 准备 这 3 个 静态 属性 是 为 了 在 XAML 代 
人 码 里 直接 获取 RelativeSource 实 例 。 下 面 是 它们 的 源码 : 


public static RelativeSource PreviousData 


| 
get 
| 
if (s previousData == null) 
| 
s previousData = new RelativeSource(RelativeSourceMode.PreviousData): 
| 
return s previousData; 
| 
| 


public static RelativeSource TemplatedParent 


| 
gel 
i 
if (s_templatedParent — null) 
| 
s templatedParent = new RelativeSource(RelativeSourceMode. TemplatedParent); 
| 
return s templatedParent; 
| 
f 


public static RelativeSource Self 


| 

gel 

| 
if (s self = null) 
| 

s self = new RelativeSource(RelativeSourceMode.Self); 

| 
return s self: 

| 


fEDataTemplateH! Z Z 555 HJ AXIN Bj m E, 5€] DataTemplatelj 
候 请 留意 它们 的 使 用 方法 。 


6.4 Binding 对 数据 的 转换 与 校 验 


前 面 我 们 已 经 知道 ，Binding 的 作用 束 是 染 在 Source 与 Target 之 则 的 
桥梁 ， 数 据 可 以 在 这 座 桥梁 的 帮助 下 来 流通 。 束 像 现实 世界 中 的 桥梁 会 
设置 一 些 关 卡 进行 安检 一 样 ，Binding 这 座 桥 上 也 可 以 设置 关卡 对 数据 
的 有 效 性 进行 检验 ， 不 仅 如 此 ， 当 Binding 两 端 要 求 使 用 不 同 的 数据 类 
型 时 ， 我 们 还 可 以 为 数据 设置 转换 妖 。 

Binding 用 于 数据 有 效 性 校 验 的 天 卡 是 它 的 ValidationRules 属 性 ， 用 
于 数据 类 型 转换 的 关卡 是 它 的 Converter 属 性 。 下 面 就 让 我 们 来 学 习 使 用 


e 
6.4.4 Binding 的 数据 校 验 


Binding 的 ValidationRules 属 性 类 型 是 Collection<ValidationRule>， 从 
它 的 名 称 和 数据 类 型 可 以 得 知 可 以 为 每 个 Binding 设 置 多 个 数据 校 验 条 
件 ， 每 个 条 件 是 一 个 ValidationRule 类 型 对 象 。ValidationRule 类 是 个 抽 
象 类 ， 在 使 用 的 时 候 我 们 需要 创建 它 的 派生 类 并 实现 它 的 Validate 方 
法 。Validate 方 法 的 返回 值 是 ValidationResult 类 型 对 象 ， 如 果 校 验 通过 ， 
束 把 ValidationResult 对 象 的 IsValid 属 性 设 为 tue， 反 之 ， 需 要 把 IsValid 
属性 设 为 false 并 为 其 ErrorContent 属 性 设置 一 个 合适 的 消 居 内 容 〈( 一 般 是 
FFEIP) 。 

下 面 这 个 程序 是 在 UI 上 绘制 一 个 TextBox 和 一 个 Slider， 然 后 在 后 合 
C# 代 但 里 使 用 Binding 把 它们 关联 起 来 一 一 以 Slider 为 源 、TextBox 为 有 目 
标 。Slider 的 取 值 范围 是 0 到 100， 也 就 是 说 ， 我 们 需要 校 验 TextBox 里 输 
入 的 值 是 不 是 在 0 到 100 这 个 范围 内 。 

程序 的 XAML 部 分 : 





«Window x:Class-" WpfA pplicationl. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title= Validation" Height-" 120" Width-" 300" 
<StackPanel> 

«TextBox x:Name-"textBox1" Margin="5" /> 

«Slider x:Name="sliderl" Minimum="0" Maximum="100" Margin="5" /2 
</StackPanel> 


</Window> 
为 了 进行 校 验 ， 需 要 准备 一 个 ValidationRule 的 派生 次 : 


public class RangeValidationRule : ValidationRule 
| 
J| TESKI Validate 方法 
public override ValidationResult Validate(objeet value, System. Globalization CultureInto eultureInfo) 
i 
double d = 0; 
if (double. TryParse(value.ToString(), out d)) 
| 
if (d>= 0 && d == 100) 
| 
return new ValidationResult(true, null); 


return new ValidationResult(false, "Validation Failed"); 


然后 在 窗 体 的 构造 并 里 这 样 建 立 Binding: 


public Window1() 


InitializeComponent(); 

Binding binding = new Binding(" Value") | Source = this.sliderl }; 

binding. UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 

RangeValidationRule rvr = new RangeValidationRule(); 

binding. ValidationRules.Add(rvr); 

this.textBox 1 .SetBinding( TextBox. TextProperty, binding); 

| 
完成 后 运行 程序 ， 当 输入 0 到 100 之 间 的 值 时 程序 正音 显示 ， 但 输入 

这 个 区 间 之 外 的 值 或 不 能 被 解析 的 值 时 TextBox 会 灾 示 红色 边框 ， 表 示 
值 是 错误 的 ， 不 能 把 它 传 递 给 Source。 效 果 如 图 6-31 所 示 。 


š Validation = E) wis š Validation 











Kl6-31 ”Binding 的 数据 校 验 示例 


Binding 进 行 校 验 时 的 默认 行为 是 认为 来 自 Source 的 数据 总 是 正确 
的 ， 只 有 来 目 Target 的 数据 因为 Target 多 为 UI 控件 ， 所 以 等 价 于 用 户 
输入 的 数据 ， 才 有 可 能 有 问题 ， 为 了 不 让 有 问题 的 数据 污染 Source 所 以 
需要 校 验 。 换 名 话说，Binding 只 在 Target 被 外 部 方法 更 新 时 校 验 数据 ， 
而 来 自 Binding 的 Source 数 据 更 新 Target 时 是 不 会 进行 校 验 的 。 如 果 想 改 
变 这 种 行为 ， 或 者 说 当 来 自 Source 的 数据 也 有 可 能 出 问题 时 ， 我 们 就 需 
要 将 校 验 条 件 的 ValidatesOnTargetUpdated 属 性 设 为 true。 

先 把 slider1 的 取 值 范围 由 0 到 100 改 成 -10 到 110: 


<$lider x: Name-"slider" Minimum="-10" Maximum="110" Margin="5" /> 


然后 把 设置 Binding 的 代码 改 为 : 


public Windowil) 
| 


InitializeComponent(); 


Binding binding = new Binding("Value") | Source = this.sliderl j; 
binding.UpdateSource Trigger = UpdateSourceTrigger.PropertyChanged; 
RangeValidationRule rvr = new RangeValidationRule(); 
rvr.ValidatesOnTargetUpdated = true; 

binding. ValdationRules.Add(rvr); 

this.textBox l.SetBinding( TextBox. TextProperty, binding); 


这 样 ， 当 Slider 的 滑 块 移出 有 效 范围 时 TextBox 也 会 显示 校 验 失败 的 
效果 如 图 6-32 所 示 。 














6-32 ”Binding 校 验 来 自 Source 的 数据 


你 可 能 会 想 : 当 校 验 错 误 的 时 候 Validate 方 法 返回 的 ValidationResult 
X] dB RER, UH ASE SD SH SHE? 想 要 做 到 这 一 点 ， 需 
要 用 到 后 面 才 会 详细 讲解 的 知识 路 由 事件 (Routed Event) 。 
首先 ， 在 创建 Binding 时 要 把 Binding 对 象 的 NotifyOnValidationError 
属性 设 为 tue， 这 样 ， 当 数据 校 验 失败 的 时 候 Binding 会 像 报 警 右 一 样 发 
出 一 个 信号 ， 这 个 信号 会 以 Binding 对 象 的 Target 为 起 点 在 UI 元 素 树 上 传 
播 。 信 缉 每 到 达 一 个 结 点 ， 如 果 这 个 结 点 上 设置 有 对 这 种 信号 的 侦 听 顺 
(事件 处 理 右 ) ， 那 么 这 个 侦 昕 右 束 会 被 触发 用 以 处 理 这 个 信号 。 信 和 坪 
处 理 完 后 ， 程 序 员 还 可 以 选择 是 让 信和 甩 继 续 回 下 传播 还 是 束 此 终止 
这 束 是 路 由 事件 ， 信 号 在 UI 元 系 树 上 的 传递 过 程 束 称 为 跤 由 
(Route) 。 
建立 Binding 的 代码 如 下 : 








public Windowl() 
| 


InitializeComponent(); 


Binding binding = new Binding(" Value") | Source = this.slider] } 
binding. UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
RangeValidationRule rvr = new Range ValidationRule( J; 

rvr. ValidatesOn TargetUpdated = true; 

binding. ValidationRules.Add(rvr); 

binding.NotifyOnValidationError = true; 

this.textBox | .SetBinding( TextBox. TextProperty, binding); 


this.textBox1.AddHandler(Validation.ErrorEvent, new RoutedEventHandler(this. ValidationError)); 
l 


HT AU BESSER a st FJ ETE AERE GRIP: 


void ValidationError(object sender, RoutedEventArgs e) 


| 
if (Validation.GetErrors(this.textBox 1 ).Count > 0) 
| 
this.textBoxl1. Tool Tip = Validation.GetErrors(this.textBox1)[0].ErrorContent. ToString(); 
| 
| 


程序 运行 时 如 果 校 验 失败 ，TextBox 的 ToolTip 就 会 提示 用 户 ， 如 图 
6-33 T2 - 


Validation Failed | 
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6.4.2 ” Binding 的 数据 转换 


前 面 的 很 多 例子 中 我 们 都 使 用 Binding 在 Slider 控 件 与 TextBox 控 件 之 
闭 建 立 关 联 Slider 控 件 作 为 Source (Path 是 Value 属性 ) ，TextBox 控 
件 作 为 Target 〈 目 标 属 性 为 Text) 。 不 知道 大 家 有 没有 注意 到 ，Slider 的 
Value 属 性 是 double 类 型 值 、TextBox 的 Text 属 性 是 string 类 型 值 ， 在 C# 这 
种 强 类 型 (strong-typed) 语言 中 却 可 以 往来 自如 ， 这 是 怎么 回 事 呢 ? 

原来 ，Binding 偿 有 另外 一 种 机 制 称 为 数据 转换 (Data Convert) , 
当 Source 端 Path 所 关联 的 数据 与 Target 端 目标 属性 数据 类 型 不 一 臻 时， 我 
们 可 以 添加 数据 转换 器 (Data Converter) 。 上 面 提 到 的 问题 实际 上 是 
double 类 型 与 string 类 型 互相 转换 的 问题 ， 因 为 处 理 起 来 比较 简单 ， 所 以 
WPF 类 库 束 自动 蔡 我 们 做 了 。 但 有 些 类 型 之 间 的 转换 就 不 是 WPF 能 蔡 我 
们 做 的 了 ， 例 如 下 面 这 些 情 况 : 

e Source 里 的 数据 是 Y、N 和 X 三 个 值 〈 可 能 是 char 类 型 、string 关 
Aok H E NMAK) ，UI 上 对 应 的 是 CheckBox 控 件 ， 需 要 把 这 三 个 
值 映 射 为 它 的 IEChecked 属 性 值 (bool? 类 型 ) 。 

e 当 TextBox 里 已 经 输入 了 文字 时 用 于 登录 的 Button 才 会 出 现 ， 这 
是 string 类 型 与 Visibility 枚 举 类 型 或 bool 类 型 之 间 的 转换 (Binding 的 
Mode 将 是 OneWay) 。 

e Source 里 的 数据 可 能 是 Male 或 Female (string 或 枚 淮 ) ，UI 上 对 
应 的 是 用 于 显示 涉 像 的 Image 控 件 ， 这 时 候 雷 要 把 Source 里 的 值 转换 成 
对 应 的 头像 图 片 URI《〈 亦 是 Oneway) 。 当 过 到 这 些 情况 时 ， 我 们 只 能 
日 己 动 手写 Converter， 方 法 古 创建 一 个 类 并 让 这 个 类 实现 
TIValueConverter 接 口 。IValueConverter 接 口 定义 如 下 : 





public interface [ValueConverter 


| 
| 


object Convert(object value, Type targetType, object parameter, Culturelnfo culture); 
object ConvertBack(object value, Type targetType, object parameter, Culturelnfo culture); 


| 
| 


当 数 据 从 Binding 的 Source 流 加 Target 时 ，Convert 方 法 将 被 调用 ; J 
之 ，ConvertBack 方 法 将 被 调用 。 这 两 个 方法 的 参数 列表 一 模 一 样 : 第 
一 个 参数 为 object， 最 大 限度 地 保证 了 Converter 的 重用 性 〈 可 以 在 方法 
体内 对 实际 类 型 进行 判断 ) ; 第 二 个 参数 用 于 确定 方法 的 返回 类 型 (个 
人 认为 形 参 名 字 叫 outputType 比 targetType 要 好 ， 可 以 避免 与 Binding 的 
Targetti) ; 第 三 个 参数 用 于 把 辕 外 的 信息 传 和 方法， 在 需要 传递 多 


个 信息 则 可 把 信息 放 入 一 个 集合 对 象 来 传 入 方法 。 

Binding 对 象 的 Mode 属 性 会 影 啊 到 这 两 个 方法 的 调用 。 如 果 Mode 为 
TwoWay 或 Default 行 为 与 TwoWay 一 致 则 两 个 方法 都 有 可 能 梓 调 用 ;如 
果 Mode 为 OnewWay 或 Default 行 为 与 OnewWay 一 致 则 只 有 Convert 方 法 会 被 
调用 ; 其 他 情况 同 理 。 

下 和 面 这 个 例子 是 一 个 Converter 的 综合 实例 ， 程 序 的 用 途 古 在 列表 里 
器 玩家 显示 一 些 车 用 飞机 的 状态 。 

自 完 创建 几 个 和 目 定义 数据 类 型 : 


i| RIS 
public enum Category 


| 


Bomber, 
Fighter 


1 
| 


I! 状态 
public enum State 


| 
| 


Available, 
Locked, 


Unknown 


1 
| 


i XB 

public class Plane 

| 
public Category Category | get; set; } 
public string Name | get; set; | 
public State State | get; set; | 


1 
| 
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个 图 标 我 已 经 加 入 了 项 目 如 图 6-34 所 示 。 


| Solution Explorer - Solution WpfApplicatio... | 


ta | Ə [z] 
| [a Solution WpfApplicationl' (1 project) 
5- (88 WpfApplicationi 
由 d| Properties 
3j. E References 








: - igi] Bomber.png 
i igi] Fighter.png 
w App.xaml 

















w Windowl.xaml 











图 6-34 项 目 中 的 两 个 图 标 


同时 ， 飞 机 的 State 属 性 在 UI 里 被 映射 为 CheckBox。 因 为 存在 以 上 
两 个 映射 关系 ， 我 们 需要 提供 两 个 Converter: 一 个 是 由 Category 关 型 单 
问 欧 换 为 string 关 型 〈XAML 编 详 船 能够 把 string 对 象 解析 为 图 万 资 
源 ) ， 另 一 个 是 在 State 与 bool? 类 型 之 间 双 回转 换 。 代 但 如 下 : 


public class Category ToSourceConverter : IValueConverter 
| 
儿 将 Category 转换 为 Uri 
public object Convert(object value, Type target Type, object parameter, Culturelnfo culture) 
i 
Category c = (Category )valuc; 
switch (c) 
| 
case Category. Bomber: 


return (@"\Icons\Bomber.pne", 


case Category.Fighter: 
return ("Icons Fighter. png"; 
default: 
return null; 
| 
| 
不 会 被 调用 
public object ConvertBack(object value, Type targetType, object parameter, Culturelnfo culture) 
i 
throw new NotlmplementedException(): 
| 


public class StateToNullableBoolConverter : IValueConverter 
| 
I| 3 State 转换 为 bool? 
public object Convert(objeet value, Type targetType, object parameter, CultureInfo culture) 
i 
State s = (State)value; 
switch (s) 
| 
case State.Locked: 
return false; 
case State Available: 
retur true; 
case State. Unknown: 
default: 
return null; 


I| K bool? 3:38: State 


public object ConvertBack(object value, Type target Type, object parameter, CultureInfo culture) 


| 
bool? nb = (bool?)value; 
switch (nb) 
| 
case true: 
return State. Available; 
case false: 
return State, Locked; 
case null: 
default: 
return State. Unknown; 
| 
| 


下 面 我 们 看 看 如 何在 XAML 里 消费 这 些 Converter。XAML 代 人 码 的 框 
架 如 下 : 


«Window x:Class-" WpfApplicationl Window" 
xmlns-"http://schemas.microsoft.com/ winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz" clr-namespace: W pf Application] " 

Title="Data Converter" Height-"266" Width-" 300 > 


<Window. Resources> 
<local:Category ToSourceConverter x:Key="cts" /> 
<local:StateToNullableBoolConverter x:Key="stnb" /> 
</Window. Resources> 


<StackPanel Background="LightBlue"> 
<ListBox x:Name="listBoxPlane" Height="160" Margin="5" /> 
«Button x:Name="buttonLoad" Content="Load" Height="25" Margin="5,0" 
Click-"buttonLoad Click" /> 
«Button x:Name-"buttonSave" Content-" Save" Height- 25" Margin- "5,5" 
Click-"buttonSave Click" /> 
«/StackPanel 
«Window 
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同时 ， 以 资源 的 形 却 创 建 了 两 个 Converter 的 实例 。 名 为 listBoxPlane 的 
ListBox 控 件 是 我 们 工作 的 重点 ， 需 要 为 它 添 加 用 于 旺 示 数据 的 
DataTemplate。 我 们 把 焦点 集中 在 ListBox 探 件 的 IemTemplate 属 性 上 : 


<ListBox x:Name="listBoxPlane" Height-" 160" Margin="5"> 
<ListBox.ltemlemplate> 
<DataTemplate> 
<StackPanel Orientation-" Horizontal 
«Image Width-"20" Height-"20" 
Source "(Binding Path-Category, Converter-[StaticResource ets| /> 
<TextBlock Text-" | Binding Path-Namej" Width-"60" Margin-" 80,0" /> 
«CheckBox IsThreeState-"True" 
IsCheckedz" [Binding Path-State, Converterz[StaticResource stnb]]" /> 
</StackPanel> 
</Data Template> 
</ListBox.ItemTemplate> 
</ListBox> 


Load 按 钮 的 Click 事 件 处 理 右 人 负 贡 把 一 组 飞机 的 数据 赋值 给 ListBox 
的 ItemsSource 属 性 ，Save 按 钮 的 Click 事 件 处 理 器 负责 把 用 户 更 改过 的 数 
据 写 入 文件 : 


li Load 按钮 Click 事件 处 理 器 
private void buttonLoad Click(object sender, RoutedEventÁrgs ë) 


| 
List<Plane> planeList = new List<Plane>() 
new Plane()! Category- Category.Bomber, Name-"B-1", State = State. Unknown], 
new Plane}! Category- Category.Bomber, Name= B-2", State = State. Unknown], 
new Plane()| Category- Category.Fighter, Name-" F-22", State = State.Unknown], 
new Plane()] Category- Category.Fighter, Name-"Su-47", State = State.Unknown;, 
new Plane}! Category- Category.Bomber, Name-" B-52", State = State. Unknown], 
new Plane)! Category- Category.Fighter, Name-"J- 10", State = State. Unknown] 
h 
this.listBoxPlane.ItemsSource = planeList; 
| 


II Save 按钮 Click 事件 处 理 器 
private void buttonSave Click(object sender, RoutedEventArgs e) 
| 
| 
StringBuilder sb = new StringBuilder(); 
foreach (Plane p in listBoxPlane.Items) 
i 
sb.AppendLine(string Format("Category={0}, Name={1!, State={2}", p.Category, p.Name, p.State)); 
| 
File. WriteAllText((@"D:\PlaneList.txt", sb.ToString()); 
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图 6-35 ”运行 效果 
单 击 Save 投 钮 后 打开 D:PlaneList.txt， 数 据 如 Bl6- 36 所 不 。 


| 司 Planelist - Notepad 
File Edit Format View Help 


Category-Bomber, Name-B-1, State-Locked 
Category-Bomber, Name-b-2, State-Unknown 
Category-Fighter, Name-F-22, State-Available 


























Category-Fighter, Name-Su-47, State- Available 
Category-Bomber, Name-E-52, State-Available 
Category-Fighter, NamezJ-10, State-Available 








图 6-36 ”PlaneList.txt 文 件 中 的 数据 
65 MultiBinding (多 路 Binding) 


有 的 时 候 UI 要 需要 显示 的 信息 由 不 止 一 个 数据 来 源 决定 ， 这 时 候 就 
需要 使 用 MultiBinding， 即 多 路 Binding。MultiBinding 与 Binding 一 样 均 
以 BindingBase 为 基 类 ， 也 就 是 说 ， 几 是 能 使 用 Binding 对 象 的 场合 mA 能 
使 用 MultiBinding。MmultiBinding 具 有 一 个 名 为 Bindings 的 属性 ， 其 类 型 


契 Collection<BindingBase>， 通 过 这 个 属性 MultiBinding 把 一 组 Binding 对 
象 聚 合 起 来 ， 处 在 这 个 集合 中 的 Binding 对 象 可 以 拥有 自己 的 数据 校 验 
与 转换 机 制 ， 它 们 汇集 起 来 的 数据 将 共同 决定 传 往 MultiBinding 目 标的 
数据 ， 如 图 6-37 所 示 。 


MultiBinding *J Z 


Bindings 属性 


Binding XJ $& 


Source 


Binding 对 $ 
Binding XJ Z: 
Binding XJ Z: 
| Source 





图 6-37 MultiBinding 示 意图 


考虑 这 样 一 个 需求 ， 有 一 个 用 于 新 用 户 注 册 的 UI (包含 4 个 TextBox 
和 一 个 Button) ， 还 有 如 下 一 些 限定 : 

e 第 一 、 二 个 TextBox 输 入 用 户 名 ， 要 求 内 容 一 致 。 

e 第 三 、 四 个 TextBox 输 入 用 户 E-Mail， 要 求 内 容 一 致 。 

e 当 TextBox 的 内 容 全 部 符合 要 求 的 时 候 ，Button 可 用 。 

此 UI 的 XAML 代 码 如 下 : 


<Window x:Class-" WpfApplication 1. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-" MultiBinding" Height-" 185" Width="300"> 
«StackPanel Background-" LightBlue" 
«TextBox x:Name="textBox1" Height-"23" Margin-"5" /> 
«TextBox x:Name-"textBox2" Height-"23" Margin" 5.0" /> 
«TextBox x:Name- textBox3" Height- 23" Margin="5" /> 
«TextBox x:Name-"textBox4" Height-"23" Margm= 3.0" /> 
«Button x: Name-"button]" Content-" Submit" Width-"80" Margin-"5" /> 
«/StackPanel^ 
«Window? 


然后 把 用 于 设置 MultiBinding 的 代码 写 在 名 为 SetMultiBinding 的 方法 
里 并 在 帘 体 的 构造 器 中 调用 : 


public Window1() 
| 


InitializeComponent(); 


this.SetMultiBinding(); 


private void SetMultiBindingf) 


| 


省 准备 基础 Binding 
Binding bl = new Binding(" Text 


| Source = this.textBox] i; 


— 000 — 


Binding b2 = new Binding( Text") | Source = this.textBox2 j; 
Binding b3 = new Binding( Text" 


Binding b4 = new Binding(" Text" 


{ Source = thus.textBox3 }; 


— 0000 


| Source = this.textBox4 }; 


I| 准备 MultiBinding 

MultiBinding mb = new MultiBinding() | Mode = BindingMode.OneWay |; 
mb.Bindings.Add(bl) // 注意 ，MultiBinding 对 Add T Binding 的 顺 夺 是 敏感 的 
mb,Bindings, Add(b2); 

mb.Bindings.Add(b3); 

mb.Bindings. Add(b4 ; 

mb.Converter = new LogonMultiBindingConverter(); 
让 将 Button 与 MultiBinding 对 象 关联 

this,button | SetBinding(Button.IsEnabledProperty, mb); 


注意 

这 里 有 几 点 需要 注意 的 地 方 : 

e MultiBinding 对 于 添加 子 级 Binding 的 顺序 是 敏感 鸭 ， 因 为 这 个 顺序 决定 了 汇集 到 
Converter 里 数据 的 顺序 。 

e MultiBinding 的 Converter 实 现 的 是 IMultiValueConverter 接 口 。 


本 例 的 Converter 代 码 如 下 : 





I| 注意 基 夫 的 变化 
public class LogonMultiBindingConverter : IMultiValueConverter 


| 
public object Convert(object| | values, Type target Type, object parameter, Culturelnfo culture) 
| 
if (!values.Cast<strimg>().Any(text => string.IsNullOrEmpty(text)) 
&& values[0].ToString() == values[1]. ToString() 
&& values[2].ToString() == values[3]. ToString()) 
| 
return true; 
| 
return false; 
| 
I| 不 会 被 调用 
public object[| ConvertBack(object value, Type[] targetTypes, object parameter, Culturelnfo culture) 
i 
throw new NotImplementedException(); 
| 
| 


程序 的 运行 效果 如 图 6-38 所 示 。 








图 6-38  MultiBindingzr f/l 


6.6 小结 


WPF 的 核心 理念 是 变 传 统 的 UI 驱动 程序 为 数据 驱动 UI， 文 撑 这 个 理 
念 的 基础 就 是 本 章 讲 述 的 Data Binding 和 与 之 相关 的 数据 校 验 与 转换 。 
在 使 用 Binding 时 ， 最 娃 要 的 事情 束 古 准确 地 人 设置 它 的 源 和 路 径 。 

当 学 习 完 Binding 后 ， 我 们 迎 来 了 新 的 问题 一 一 为 什么 WPF 里 的 UIl 
元 素 可 以 通过 Binding 关 联 到 数据 上 ， 实 时 关注 数据 的 变化 昵 ? 换 句 话 
说 ， 什 么 样 的 对 象 才能 作为 Binding 的 目标 来 使 用 呢 ? 这 就 是 我 们 下 一 
草 要 详细 讲述 的 内 容 一 一 依赖 属性 与 依赖 对 象 。 





7 
UR NT h T J TE 


通过 前 面 的 学 习 ， 我 们 已 丝 知道 Data Binding 是 WPF“ 数 据 驱 动 
UT 理念 的 基础 。 上 一 草 我 们 把 精力 放 在 了 Binding 的 数据 源 这 一 病 ， 研 
2ú T Bindingll)Source-; Path, š: 34] THU H 26 In] Bindinglf] H P, 
研 E 下 什么 样 的 对 象 才能 作为 Binding 的 Target 以 及 Binding 将 把 数据 送 
往 何 处 。 


7.1 属性 (Property) 的 来 龙 去 脉 


程序 的 本 质 驶 是 “数据 十 算法 ”， 或 者 说 是 用 算法 来 处 理 数据 以 期 得 
到 得 出 结 有 末 。 在 程序 中 ， 数 据 表 现 为 各 种 各 样 的 变量 ， 算 法 则 表现 为 各 
种 各 样 的 函数 (操作 人 符 是 函数 的 人 简 记 法 ) 。 即 使 是 到 了 面 回 对 象 时 代 有 
了 类 等 数据 结构 的 出 现 ， 这 一 本 质 仍然 没有 改变 一 一 类 的 作用 只 是 把 黎 
沙 在 程序 中 的 变量 和 函数 进行 归档 封闭 并 控制 对 它们 的 访问 而 已 。 被 封 
闭 在 类 里 的 变量 称 为 字段 (Field) ， 它 表示 的 是 类 或 实例 的 状态 :被 封 
闭 在 类 里 的 函数 称 为 方法 (Method) ， 它 表示 类 或 实例 的 功能 〈 即 能 做 
什么 )。 人 字段 和 方法 构成 了 最 原始 的 面 回 对 象 封 狼 ， 这 时 候 的 面 同 对 象 
概念 中 还 不 包含 事件 、 属 性 等 概念 。 

我 们 可 以 使 用 诸如 private、Ppublic 等 修饰 符 来 控制 字段 或 方法 的 可 
访问 性 ; 是 否 使 用 static 关 键 字 来 修饰 字段 或 方法 则 决定 了 字段 或 方法 是 
对 类 有 意义 还 是 对 类 的 实例 有 意义 。 所 谓 “ 对 类 有 音义 ”或 “对 实例 有 总 
义 ” 剖 是 语义 泥 畸 的 概念 。 比 如 对 于 Human 这 个 类 来 襄 ，Weight (Œ 
E) 这 个 字段 对 于 人 类 的 个 体 是 有 意义 的 ， 而 对 于 “人 类 ”这 个 概念 并 没 
有 什么 意义 ; Amount CREER 这 个 字段 环 不 一 样 了 ， 它 对 于 人 类 的 个 
体 没 有 意义 ， 但 对 于 人 类 是 有 有 意义 的 。 方 法 也 有 类 似 的 情况 ， 比 如 
Speak 这 个 方法 ， 只 有 人 美的 个 体 才 能 Speak， 而 Populate〈 运 衍 ) 这 个 
方法 似乎 对 于 人 奖 比 对 于 人 关 的 个 体 更 有 意义 。 为 了 让 程序 满足 语义 要 
求 ，C# 语 言 规定 : 对 类 有 意义 的 字段 和 方法 使 用 static 关 键 字 修饰 、 称 
为 语 态 成 员 ， 通 过 关 名 加 访问 操作 符 《〈 即 “.” 操 作 符 ) 可 以 访问 它们 ， 对 
类 的 实例 有 意义 的 字段 和 方法 不 加 static 关 键 字 ， 称 为 非 静 态 成 员 或 实例 


成 员 。 


从 语义 方面 来 看 ， 静 态 成 员 与 非 静 态 成 员 有 着 很 好 的 对 称 性 ， 但 从 
程序 在 内 存 中 的 结构 来 看 ， 这 种 对 称 融和 被 打 令 了 。 角 态 字段 在 内 存 中 只 
有 一 个 找 贝 ， 非 静态 字段 则 是 每 个 实例 拥有 一 个 揽 贝 ， 无 论 方 法 是 售 为 
前 态 的 ， 在 内 存 中 只 会 有 一 份 拷贝 ， 区别 只 是 你 能 通过 类 名 来 访问 存放 
指令 的 内 存 还 是 通过 实例 名 来 访问 存放 指令 的 内 存 。 

现在 让 我 们 看 看 属性 是 怎样 演变 出 来 的 。 字 上 段 补 封 状 在 实例 里 ， 要 
么 能 被 外 界 访问 〈 非 private 修 钱 ) 、 要 人 么 不 能 〈 使 用 private 修 饰 ) ， 如 
图 7-1 所 示 。 






[| 3k go | 





图 7-1 字段 的 访问 权限 


这 种 直接 把 数据 暴露 给 外 界 的 作法 很 不 安全 ， 很 容易 就 会 把 错误 的 
值 写 入 字段 。 如 果 在 每 次 写 入 数据 的 时 候 都 先 判 断 一 下 值 的 有 效 性 又 会 
增加 允 余 的 代码 并 且 违 反面 同 对 象 要 求 “ 蜗 内 聚 ” 的 原则 ， 我 们 希望 对 象 
自己 有 能 力 判 断 将 被 写 入 的 值 是 否 正确 。 于 是 ， 程 序 员 仍 然 把 字段 标记 
为 private 但 使 用 一 对 非 private 的 方法 来 包装 它 。 在 这 对 方法 中 ， 一 个 以 
Set 为 前 缀 且 负 贡 判 断 数据 的 有 效 性 并 号 入 数据 ， 另 一 个 以 Get 为 前 绥 且 
负责 把 字段 里 的 数据 恋 取 出 来 。 如 图 7-2 所 示 。 





图 7-2 ”类 中 的 Set 方 法 与 Get 方 法 
以 Human 类 为 例 ， 如 果 把 类 设计 成 这 样 : 


class Human 


| 

public int Age; 
| 
| 


那么 当 有 类 似 这 样 的 操作 时 ， 就 有 可 能 不 被 察觉 


Human h = new Human(); 
h.Age = -100; 

h.Age = 1000; 

iP 

但 把 类 设计 成 这 样 ， 


class Human 
I 
| 


private Int age; 


public void SetAgelint value) 

| 
if (value >= 0 && value <= 100) 
{ this.age = value; } 
else 


| throw new OverflowException(" Age overflow."); ! 


public int GetAge() 


Í 


return this.age; 


则 情况 就 会 好 很 多 。 如 果 去 掉 SetAge 方 法 或 者 用 private 修 饰 SetAge 
方法 ， 那 么 对 数据 的 访问 束 变 成 了 只 读 形 式 (Read-only) 。 很 多 传统 的 
类 库 使 用 的 束 是 这 种 数据 封 狼 和 访问 方法 ， 例 如 MFC 束 是 这 样 。 我 们 称 
这 对 Get/Set 方 法 为 private 字 上 段 的 安全 包装 。 
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号 的 时 候 代 三 比较 分 BY, 使 用 的 时 候 又 要 在 自动 提示 里 上 下 翻动 。 于 
是 ， 当 .NET Framework 推 出 时 ， 人 微软 更 进一步 把 Get/Set 这 对 方法 合并 成 
了 属性 (Property，〉。 使 用 属性 时 ， 格 式 上 很 像 使 用 非 private 字 段 ， 你 
证 了 语义 上 的 顺畅 ， 同 时 又 不 失 Get/Set 方 法 的 安全 性 ， 代 码 变 得 更 加 紧 
Ë, 日 动 提示 玉音 也 短 了 许多 ， 可 谓 一 举 多 得 。 使 用 属性 ，Human 凑 可 
以 改写 成 这 样 : 


class Human 


1 
private int age; 


public int Age 
| 
get | retum this.age; | 
sel 
I 
IÍ (value >= 0 && value <= 100) 
{ this.age = value; | 
else 
| throw new OverflowException(" Age overflow."); | 


这 种 .NET Frameworkk 中 的 属性 义 称 为 CLR 属 性 (CLR, Common 
Language Runtime) 。 我 们 既 可 以 说 CLR 属 性 是 private 字 段 的 安全 访问 
包 甘 ， 也 可 以 说 一 个 private 字 段 在 后 台 文 持 (back) 一 个 CLR 属 性 。 这 
个 模式 可 以 用 如 图 7-3 所 示 的 模式 解释 。 





图 7-3 | CLR 属 性 模式 


最 后 还 有 个 小 问题 : 实例 的 每 个 private 字 段 者 会 占用 一 定 的 内 存 ， 
现在 字段 被 属性 包 冯 了 起 来 ， 每 个 实例 看 上 去 都 市 有 相同 的 属性 ， 那 么 
是 个 是 每 个 实例 的 CLR 属 性 也 会 多 占 一 后 内 存 呢 ?想得到 这 个 问题 的 管 
案 ， 使 用 I 开 反 编译 器 打开 编译 结果 束 可 以 了 如 图 7-4 所 示 。 


Íz... QUE UTOR TEN EA | 
| P MANIFEST 
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m D iem AES auto ansi beforefieldinit 
: @ age: ilios int32 








EN get Age : int320 
(M) set Aae : void(int32) 





m. T cucine. Program 


| assembly ConsoleApplication1 





图 7-4 ” CLR 属性 的 编辑 结果 


原来 C# 代 人 码 中 的 属性 的 编译 结果 是 两 个 方法 ! 前 面 已 经 说 过 ， 再 多 
实例 方法 也 只 有 一 个 拷贝 ， 所 以 ，CLR 属 性 并 不 会 增加 内 存 的 负担 。 同 
时 也 说 明 ， 属 性 仅仅 是 个 语法 糖衣 (Syntax Sugar) 。 


7.2 ”依赖 属性 (Dependency Property) 


在 WPF 中 ， 微 软 将 属性 这 个 概念 又 回 前 推进 了 一 步 ， 推 出 了 “依赖 
属性 ”这 个 新 概念 。 简 言 之 ， 依 赖 属性 束 是 一 种 可 以 目 己 没有 值 ， 并 能 
通过 使 用 Binding 从 数据 源 获 得 值 〈 依 赖 在 别人 身上 ) 的 属性 。 拥 有 依 
赖 属性 的 对 象 被 称 为 “依赖 对 象 ?。 与 传统 的 CLR 属 性 和 和 面 同 对 象 思 想 相 
比 依赖 属性 有 很 多 新 条 之 处 ， 其 中 包括 : 

e 节省 实例 对 内 存 的 开销 。 

e 属性 值 可 以 通过 Binding 依 赖 在 其 他 对 象 上 。 

下 面 束 让 我 们 逐一 分 析 这 些 新 特性 。 


72.1 依赖 属性 对 内 存 的 使 用 方式 


依赖 属性 较 之 CLR 属 性 在 内 和 存 使 用 方向 过 然 不 同 。 有 前面 已 经 说 过 ， 
实例 的 每 个 CLR 属 性 都 包装 大 一 个 非 静 态 的 字段 (或 者 说 由 一 个 非议 态 
的 字段 在 后 台 文 持 ) ， 思 考 这 样 一 个 问题 ，TextBox 有 138 个 属性 ， 假 设 
每 个 CLR 属 性 都 包 北 着 一 个 4 字 市 的 字段 ， 如 末 程 序 运 行 的 时 候 创 建 了 
10 列 1000 行 的 一 个 TextBox 列 表 ， 那 么 这 些 字段 将 占用 
4*138*10*100045.26M FJ ££! 在 这 一 百 多 个 属性 中 ， 最 弟 用 的 也 就 是 
Text 属 性 ， 这 束 意 味 看 大 多 数 内 存 都 会 彼 浪 费 挥 。 

怎样 避免 这 种 浪费 呢 ? 让 我 们 思考 现实 世界 中 的 一 个 问题 ， 一 个 登 
山 队 员 ， 他 的 全 侄 装 备 有 很 多 ， 包 括 登 山 服 、 登 山 台 、 登 山 杖 、 护 目 
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对 象 所 占用 的 内 存 空间 在 调用 new 操 作 符 进行 实例 化 的 时 候 就 已 经 决定 
了 ， 而 WPF 人 允许 对 象 在 被 创 建 的 时 候 并 不 包含 用 于 存储 数据 的 空间 《 即 
字段 所 占用 的 空间 〉 、 只 体 留 在 需要 用 到 数据 时 能 够 获 得 默认 值 、 依 用 
其 他 对 象 数据 或 实时 分 配 空间 的 能 这 种 对 象 束 称 为 依赖 对 象 
(Dependency ”Object)〉 而 它 这 种 实时 获取 数据 的 能 力 则 依 菲 依赖 属性 
(Dependency Property) 来 实现 。WPF 开 发 中 ， 必 须 使 用 依赖 对 象 作为 
依赖 属性 的 宾主， 使 二 者 结合 起 来 ， 才 能 形成 完整 的 Binding 目 标 被 数 
据 所 驱动 。 

在 WPF 系 统 中 ， 依 赖 对 象 的 概念 被 DependencyObject 类 所 实现 ， 依 
赖 属性 的 概念 则 由 DependencyProperty 类 所 实现 。DependencyObject 有 具有 
GetValue 和 SetValue 两 个 方法 : 





public class DependencyObject : DispatcherObject 


| 
| 


public object GetValue(DependeneyProperty dp) 


Í 
l 


public void SetValue(DependencyProperty dp, object value) 


XX A4 77 1E 3B E) DependencyPropertyX] £3 732224,  GetValue77 7:38 
i DependencyPropertyX] 23 3X BUS;  SetValueXiixX DependencyProperty 
对 象 存储 值 一 一 下 是 这 两 个 方法 把 DependencyObject 和 
DependencyProperty 紧 密 结合 在 一 起 。 

DependencyObject 是 WPF 系 统 中 相当 确 层 的 一 个 基 类 ， 如 图 7-5 所 
ZJN o 





ContentControl ItemsControl 





HeaderedContentControl Selector HeaderedltemsControl 


Kl7-5 ”DependencyObject 继 承 树 


从 这 棵 继承 树 上 可 以 看 出 ，WPF 的 所 有 UI 控件 都 是 依赖 对 象 。WPF 
Lp ro ER AE 
L5 Zt AR : 


7.2.2 ”声明 和 使 用 依赖 属性 


本 小 市 我 们 使 用 一 个 简单 的 实例 来 说 明 依 赖 属性 的 使 用 方法 。 


«Window x:Class-"WpfApplicationl Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title-"DependencyProperty" Height-" 135" Width="260"> 

<StackPanel> 
«TextBox x: Name-"textBox1" BorderBrush="Black" Margin="5" /> 
«TextBox x Name= textBox2 BorderBrush-" Black" Margin="5" /> 
«Button Content-"OK" Margin="5" Chek= Button Click" /7 
</StackPanel> 
</Window> 


运行 效果 如 图 7-6 所 示 。 





| E” DependencyProperty' 


图 7-6 示例 界面 效果 


前 面 已 经 说 过 ，DependencyProperty 必 须 以 DependencyObject 为 宿 
主 、 值 助 它 的 SetValue 和 GetValue 方 法 进行 写 入 与 读 取 。 因 此 ， 想 使 用 
目 定义 的 DependencyProperty， 箱 主 一 定 古 DependencyObject 的 派生 类 ，。 
DependencyProperty 实 例 的 声明 特点 很 鲜明 引用 变量 由 public static 
readonly 三 个 修饰 从 修饰 ， 实 例 并 非 使 用 new 操 作 从 得 到 而 是 使 用 
DependencyProperty.Register 方 法 生成 。 代 人 码 如 下 : 





public class Student : DependencyObject 
1 
l 


publie static readonly DependencyProperty NameProperty = 
DependencyProperty.Register(" Name", typeof(string), typeof(Student)); 


这 是 使 用 DependencyProperty 的 最 简 代 码 ， 我 们 来 分 析 一 下 : 
首先 ， 如 前 所 述 ，DependencyProperty 一 定 使 用 在 DependencyObject 


里 ， 所 以 Student 派 生 目 DependencyObject 次 。 

其 次 ， 使 用 DependencyProperty 声 明 的 成 员 变 量 同时 被 public static 
readonly 三 个 修饰 从 修饰 。 在 这 里 我 们 直到 一 个 命名 约定 一 一 成 员 变 量 
的 名 字 逢 要 加 上 Property 后 级 以 表明 它 是 一 个 依赖 属性 。 我 们 打算 用 这 
个 依赖 属性 存 学 生 的 姓名 ， 所 以 把 它 命 名 为 NameProperty。 

再 次 ， 这 个 成 员 变 量 所 引用 的 实例 并 非 使 用 new 操 作 符 得 到 ， 而 是 
使 用 DependencyProperty.Register 方 法 创建 。 现 在 使 用 的 是 这 个 方法 参数 
最 少 、 最 入 单 的 一 个 重 载 ， 让 我 们 分 析 一 下 这 3 个 参数 : 

° 第 1 个 参数 为 string 类 型 ， 用 这 个 参数 来 指明 以 哪个 CLR 属 性 作 
为 这 个 依赖 属性 的 包 疙 右 ， 或 者 说 此 依赖 属性 支持 (back) 的 是 哪个 
CLR 属 性 。 目 前 虽然 没有 为 这 个 依赖 属性 准备 包 涛 右 ， 但 将 来 会 使 用 名 
7jNamel|CLR/& ERKA RE, PH PL b 2204060818 Name. 

e 第 2 个 参数 用 来 指明 此 依赖 属性 用 来 存储 什么 类 型 的 值 ， 学 生 的 
姓名 是 string 类 型 ， 所 以 古 这 个 参数 被 赋值 为 typeof(string)。 

e 第 3 个 参数 用 来 指明 此 依赖 属性 的 牡 主 是 什么 类 型 ， 或 者 说 
DependencyProperty.Register 方 法 将 把 这 个 依赖 属性 注册 关联 a 到 哪个 类 型 
上 。 本 例 中 的 意图 是 为 Student 类 准备 一 个 可 依赖 的 名 称 属性 ， 所 以 需要 
把 NameProperty 注 册 成 与 Student 关 联 ， 因 此 这 个 参数 被 赋值 为 
typeof(Student). 
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这 里 有 三 点 需要 注意 : 

(1) 依赖 属性 的 包装 器 (Wrapper) 是 一 个 CLR 属 性 ， 因 为 初学 者 头脑 中 “属性 ”的 概念 就 
是 CLR 属 性 ， 所 以 和 常 党 把 包装 右 误 认为 是 依赖 属性 ， 而 实际 上 依赖 属性 就 是 那个 由 public static 
readonly 修 饰 的 DependencyProperty 实 例 ， 有 没有 包装 器 这 个 依赖 属性 都 存在 。 

(2) 既然 有 没有 包装 占 依 赖 属性 都 存在 ， 那 么 包装 絮 是 干什么 用 的 昵 ? 包 装 絮 的 作用 是 
以 “实例 属性 ”的 形式 同 外 界 骏 露 依赖 属性 ， 这 样 ， 一 个 依赖 属性 才能 成 为 数据 源 的 一 个 Path。 

(3) 注册 依赖 属性 时 使 用 的 第 二 个 参数 是 一 个 数据 类 型 ， 这 个 数据 类 型 也 是 包装 右 的 数 
据 类 型 ， 它 的 全 称 应 该 是 “依赖 属性 的 注册 类 型 "?， 但 一 般 情况 下 也 会 把 这 个 类 型 类 型 称 为 “依赖 
pee (严格 地 说 ， 依 赖 属性 的 类 型 永远 都 是 DependencyProperty， 只 是 工作 中 叫 习 惯 
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并 把 值 顺利 读 取 出 来 。 

UI 中 OK 按钮 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 

| 
Student stu = new Student ); 
stu.SetValue(Student.NameProperty, this.textBox 1 Text); 
textBox2. Text = (string)stu.GetValue(Student.NameProperty); 


| 


第 一 句 是 创建 一 个 Student 实 例 并 使 用 变量 stu 引 用 ; 第 二 句 是 调用 
SetValue 方 法 把 textBox1.Text 属 性 的 值 存 储 进 依赖 属性 ， 第 三 句 是 使 用 
GetValue 方 法 把 值 读 取出 来 ， 注 意 ，SetValue 的 返回 值 是 object 类 型 ， 所 
以 要 进行 适当 的 类 型 转换 。 如 前 所 述 ，Student 类 有 的 SetValue 和 GetValue 
方法 继承 自 DependencyObject 类 。 

程序 运行 的 效果 如 图 7-7 所 示 。 


8 ' DependencyProperty 

















图 7-7 ”依赖 属性 使 用 示例 


当 第 一 次 看 到 这 个 例子 的 时 候 ， 也 许 会 有 点 百 思 不 得 其 解 的 感觉 
— 依赖 属性 是 一 个 static 对 象 ， 哪 但 有 1000 个 Student 实 例 ， 依 赖 属性 对 
象 也 只 有 一 个 ， 那 么 调用 SetVaule 方 法 时 值 被 存储 到 哪里 去 了 呢 ? 调用 
GetValue 时 值 又 被 从 哪里 谈 出 昵 ? 而 且 ， 被 readonly 关 键 字 修 饰 的 变量 
不 是 只 谈 的 吗 ， 怎 么 可 以 用 来 号 入 值 呢 ? 其 实 这 个 问题 直 指 依赖 属性 机 
制 的 核心 ， 我 们 会 在 下 一 小 节 专 门 讨论 。 现 在 还 是 请 把 思维 集中 在 依 颊 
属性 的 使 用 上 。 

上 面 的 例子 中 ， 依 赖 属 性 作为 “属性 ?的 功能 已 经 展现 了 出 来 ， 那 
么 ， 怎 样 体 现 它 的 “依赖 * 性 呢 ? 让 我 们 看 下 面 这 个 例子 。 先 回顾 一 下 
Binding，Binding 作 为 数据 流动 的 桥 染 ， 一 闹 是 数据 的 来 源 ， 为 一 六 是 
数据 的 目标 ， 一 上 般 情况 下 ， 数 据 的 来 源 是 业务 迎 辑 层 的 对 象 而 目标 是 UI 
层 的 控件 。 在 下 面 这 个 例子 中 ， 我 们 暂且 倒 过 来 ， 让 textBox1 作 为 数据 


来 源 ， 把 Student 实 例 作 为 数据 的 目标 ， 让 Student 实 例 依赖 在 textBox1l 
Lb. PEERS 这 里 仅仅 是 为 了 展示 依赖 属性 上 的 “依赖 ?功能 ， 现 实 工 作 中 几 
乎 从 来 不 这 么 做 。 

TEE A HKN a gR: 


public partial class Window] : Window 
| 


Student stu; 


public Window! () 


Í 
l 


InitializeComponent(); 

stu = new Student(): 

Binding binding = new Binding(" Text") { Source = textBox] j; 
BindingOperations.SetBinding(stu, Student, NameProperty, binding); 


private void Button. Click(object sender, RoutedEventArgs e) 


| 
MessageBox.Show(stu.GetValue(Student. NameProperty ). ToString()); 


1 
| 


最 核心 的 代码 位 于 构造 右 的 最 后 两 行 ， 先 是 创建 一 个 Binding 的 实 
例 ， 让 textBox1 作 为 数据 源 对 象 并 从 其 Text 属 性 中 获取 数据 ， 其 后 一 句 
是 使 用 BindingOperations 类 有 的 SetBinding 方 法 指定 将 stu 对 象 借 助 刚 刚 声 
明 的 Binding 实 例 依赖 在 textBox1 上 。 

当 在 textBox1 里 输入 一 些 字 符 并 按 下 OK 按钮 时 会 弹出 对 话 框 显 示 依 
赖 属性 的 值 如 图 7-8 所 示 。 
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图 7-8 Student 实例 依赖 在 textBoxl 上 


说 实话 ， 这 个 有 点 “学 院 铂 ”的 例子 并 不 怎么 实用 ， 但 通过 它 我 们 要 
认 清 一 个 事实 ， 那 束 是 依赖 属性 即使 没有 CLR 属性 作为 其 外 包装 也 可 以 
很 好 地 工作 。 
代码 的 进化 并 没有 结束 。 如 采 我 想 把 textBox1 和 textBox2 天 联 起 
来 ， 代 码 应 该 是 这 样 : 
es 
Binding binding = new Binding(" Text") { Source = textBox] }; 
textBox2.SetBinding( TextBox. TextProperty, binding); 
M 


这 里 调用 了 textBox2 的 SetBinding 方 法 ， 这 比 调用 BindingOperations 
的 SetBinding 方 法 以 第 三 人 称 的 视角 将 数据 的 源 与 目标 关联 起 来 感觉 要 
目 然 一 些 。 如 果 你 答 试 调用 stu 对 象 的 SetBinding 方 法 ， 你 会 友 现 stu 没 有 
这 个 方法 ， 因 为 DependencyObject 类 (Student 类 的 基 类 ) 没有 这 个 方 
法 。SetBinding 方 法 是 FrameworkElement 类 的 方法 。FrameworkElement 
是 个 相当 高 层 的 类 ， 甚 至 比 UIElement 类 的 层级 还 高 一 一 这 从 侧面 癌 我 
们 传 违 了 这 样 一 个 思想 一 一 做 软 布 望 能 够 SetBinding〈( 即 作为 数据 目 
ERO 的 对 象 是 UI 元 素 。 其 实 ，EFrameworkElement 类 的 SetBinding 方 法 并 
不 神秘 ， 仅 仅 对 BindingOperations 的 SetBinding 方 法 做 了 一 个 徐 单 的 封 
装 ， 人 代码 如 下 : 








public class FrameworkElement : UIElement // ... 
i 


i 
public BindingExpressionBase SetBinding(DependencyProperty dp, BindingBase binding) 
i 
retum BindingOperations.SetBinding(this, dp. binding); 
| 
| 


看 完 上 面 几 个 例子 ， 相 信 大 家 已 经 理解 了 依赖 属性 的 使 用 方法 。 但 
现在 我 们 使 用 的 依赖 属性 依靠 SetValue 和 GetValue 两 个 方法 进行 对 外 界 
的 骏 露 ， 而 且 在 使 用 GetValue 的 时 候 还 需要 进行 一 次 数据 次 型 的 转换 ， 
因此 ， 大 多 数 情况 下 我 们 会 为 依赖 属性 琴 加 一 个 CREL 属 性 外 包 凌 : 


public class Student : DependencyObject 
| 
Il CLR ENEE qa 
public string Name 
| 
get | return (string)GetValue(NameProperty); | 


set | SetValue(NameProperty, value); | 


public static readonly DependencyProperty NameProperty = 
DependencyProperty.Register(" Name", typeof(string), typeof(Student)); 


A T XX CLR/& TE B.E 139, n] AREV In] On TE T : 


private void Button. Click(object sender, RoutedEventArgs e) 


| 
l 


Student stu = new Student(); 
stu.Name = this.textBox 1 Text; 


this.textBox2. Text = stu. Name: 


WK S u JK] JSE, POET REE HR eos PESE E PEH] 5 2k 
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我 们 知道 ， 依 赖 对 象 可 以 通过 Binding 依 赖 在 其 他 对 象 上 ， 即 依赖 
对 象 是 作为 数据 的 目标 而 存在 的 。 现 在 ， 我 们 为 依赖 对 象 的 依赖 属性 添 
JH f CLRJSTERIS, f fie. WLUHIAG A3 WOWON E rH 
露 数据 的 Binding ”Path， 世 就 是 说 ， 现 在 的 依赖 对 象 已 经 具备 了 扮演 数 
据 源 和 数据 目标 双重 角色 的 能 力 。 值 得 注意 的 是 ， 尽 管 Student 关 没有 实 
现 INotifyPropertyChanged 接 口 ， 当 属性 的 值 友 生 改 变 时 与 之 关联 的 
Binding 对 象 依 然 可 以 得 到 通知 ， 人 依赖 属 性 默认 市 有 这 样 的 功能 ， 天 生 
束 是 合格 的 数据 源 。 

现在 ， 我 们 问 FrameworkElement 类 借用 一 下 它 的 SetBinding 方 法 、 
升级 一 下 Student 类 : 


public class Student : DependencyObject 


! 
| 


/| CLR 8 T L3 qa 

public string Name 

Í 

l 
get | return (string)GetValue(NameProperty); | 
set 1 SetValue(NameProperty, value); | 


| 


省 依赖 属性 
public static readonly DependencyProperty NameProperty = 
DependencyProperty.Register( "Name", typeof(string), typeof(Student)); 


|I SetBinding 包装 
public BindingExpressionBase SetBinding(DependencyProperty dp, BindingBase binding) 


| 
I 


return BindingOperations.SetBinding(this, dp, binding); 
| 


| 
| 


然后 ， 我 们 使 用 Binidng 把 Student 对 象 关 联 到 textBox1 上 ， 再 把 
textBox2 关 联 到 Student 对 象 上 形成 Binding 链 。 代 人 码 如 下 : 


public Windowl() 


1 
| 


InitializeComponent(); 

stu = new Studenti); 

stu. SetBinding(Student. NameProperty, new Binding(" Text") | Source = textBoxl 1); 
textBox2.SetBinding( TextBox.TextProperty, new Binding( Name") | Source = stu |); 


| 
| 


运行 程序 ， 当 在 textBox1 中 输入 字符 的 时 候 ，textBox2 束 会 同步 显 
示 。 当 然 ， 此 时 Student 对 象 的 Name 属 性 值 也 同步 变化 了 。 
注意 

最 后 ， 癌 大 家 介绍 一 个 小 技巧 。 在 一 个 类 中 声明 依赖 属性 时 并 不 需要 手动 进行 声明 、 注 
册 并 使 用 CLR 属 性 封装 ， 只 需要 输入 propdp，Visual Studio 2008 的 提示 列表 中 会 有 一 项 高 亮 显 
示 ， 这 时 连 按 两 次 Tab 键 ， 一 个 标准 的 依赖 属性 〈 带 CLR 属 性 包装 ) 束 声 明 好 了 ， 继 续 按 动 Tab 
键 ， 可 以 在 提示 环境 中 修改 依赖 属性 的 各 个 参数 。 这 个 功能 称 为 snippet ( 称 为 代码 模板 或 代码 
1 D EON Studio S Efe A E E, < Z= Je Be n] EUCH de u Zn 3 pE 
EE F ERRIRE. 


由 snippet 自 动 生 成 的 代码 中 ，DependencyProperty.Register 使 用 的 是 
市 4 个 参数 的 重 载 ， 前 3 个 参数 与 我 们 前 面 介 绍 的 一 致 ， 第 4 个 参数 的 次 
型 是 PropertyMetadata 类 。 第 4 个 参数 的 作用 是 给 依赖 属性 的 
DefaultMetadata 属 性 赋值 。 顾 名 思 义 ，DefaultMetadata 的 作用 是 向 依赖 
属性 的 调用 者 提供 一 些 基 本 信息 ， 这 些 信息 包括 : 

e CoerceValueCallback: 依赖 属性 值 被 强制 改变 时 此 委托 会 锐 调 
用 ， 此 委托 可 关联 一 个 影 啊 函 数 。 

e DefaultValue: 依赖 属性 未 被 显 式 赋值 时 ， 厂 读 取 之 则 获得 此 默 
WE, ARIES B iH S. 

e IsSealed: 控制 PropertyMetadata 的 属性 值 是 否 可 以 更 改 ， 默 认 值 
为 true。 

e PropertyChangedCallback: 依赖 属性 的 值 锌 改变 之 后 此 委托 会 被 
调用 ， 此 委托 可 天 联 一 个 影响 函数 。 
需要 注意 的 是 ， 依 赖 属 性 的 DefaultMetadata 只 能 通过 Register 方 法 的 第 4 个 参数 进行 赋值 ， 


而 且 一 旦 赋值 就 不 能 改变 (DefaultMetadata 是 个 只 读 属 性 ) 。 如 果 想 用 新 的 PropertyMetadata 符 
换 这 个 默认 的 Metadata， 需 要 使 用 DependencyProperty.OverrideMetadata 方 法 。 


723 ”依赖 属性 值 存 取 的 秘密 
回 到 前 面 那 个 问题 一 一 调用 依赖 对 象 的 SetValue 方 法 时 ， 值 被 存储 


到 哪里 了 ? 因为 依赖 对 象 的 依赖 属性 是 一 个 static 对 象 ， 所 以 值 不 可 能 是 
你 存在 这 个 对 象 里 ， 不 然 几 白 个 实例 都 进行 赋值 时 到 压 应 该 你 存 哪 个 、 
CR 
来 剖析 一 下 。 

回想 前 面 和 学习 的 内 容 ， 不 难 友 现 依赖 属性 的 使 用 大 致 分 为 两 个 步 
H: 第 一 步 ， 在 DependencyObject 派 生 类 中 声明 public static 修 饰 的 
DependencyProperty 成 员 变 量 ， 并 使 用 DependencyProperty.Register 广 法 

(而 不 是 new 操 作 符 〉 获 得 DependencyProperty 的 实例 ; 第 二 步 ， 使 用 

DependencyObjectH 欠 SetValue 和 GetValue 方 法 、 借 助 DependencyProperty 
实例 来 存 取 值 。 因 此 ， 我 们 重点 要 分 析 的 束 是 
DependencyProperty.Register 方 法 和 DependencyObject.SetVaule 方 法 和 
DependencyObject.GetValue 方 法 。 

先 来 研究 DependencyProperty.Register 方 法 。 顾 名 思 义 ， 这 个 方法 不 
仅 要 创建 DependencyProperty 实 例 ， 还 要 对 它 进 行 “ 注 册 ”。 这 样 问 题 残 
来 了 DependencyProperty 实 例 和 被 注册 到 哪里 了 呢 ? 

阅 旋 源 合 ， 你 会 及 现 DependencyProperty 关 具有 这 样 一 个 成 员 : 


private static Hashtable PropertyFromName = new Hashtable(): 


AREA, HEFEI., HLAHiXRER— 7T -4Hashtablef£fE, ix^" 
Hashtable 束 是 用 来 注册 DependencyProperty 实 例 的 地 方 。 
在 源码 中 ， 所 有 的 DependencyProperty.Register 方 法 重 载 最 后 都 归结 





为 对 DependencyProperty. RegisterCommon 方 法 的 调用 (可 以 把 
RegisterCommon 理 解 为 Register 方 法 的 “完整 版 ”) 。RegisterCommon 方 
法 的 原型 如 下 : 


private static DependencyProperty RegisterCommon 

( 
string name, 
Type property Type, 
Type ownerType, 
PropertyMetadata defaultMetadata, 
Validate ValueCallback validate ValueCallback 

| 

可 以 看 出 ，RegisterCommon 方 法 的 前 4 个 参数 与 我 们 前 和 面 分 析 过 的 
gem 。 下 面 束 让 我 们 研究 一 下 这 个 方法 如 何 操作 和气 的 参 


O 


在 刚刚 进入 方法 的 时 候 你 会 看 到 这 样 一 句 : 


FromNameKey key = new FromNameKey(name, owner Type): 

FromNameKey 是 一 个 ,NET Framework 内 部 数据 类 型 。 它 的 构造 器 代码 如 下 : 
public FromNameKey(string name, Type ownerType) 
| 

name = name; 

 ownerType = ownerType; 

hashCode = name.GetHashCode() ^ ownerType.GetHashCode(): 


| 
| 


并 且 override 有 其 GetHashCode 方 法 : 


public override int GetHashCode() 
retum hashCode: 
| 
代码 的 意图 一 日 了 然 ， FromNameKey 对 象 〈 也 就 是 变量 key) 的 

hash _ code 实际 上 是 RegisterCommon 第 1 个 参数 (CCLR 属 性 名 字符 串 ) 的 
hash code 与 第 3 个 参数 (Tn E2878) 的 hash code 做 异 或 运算 得 来 的 。 这 
样 操作 ， 每 对 “CLR 属 性 名 一 答 主 类 型 ”所 决定 的 DependencyProperty 实 
例 束 是 唯一 的 。 所 以 ， 在 RegisterCommon 方 法 里 会 友 现 这 样 的 代码 : 


if (PropertyFromName.Contains(key)) 


1 
throw new ArgumentException( SR.Get(SRID.PropertyAlreadyRegistered, name, ownerType.Name)); 


也 吏 是 说 ， 如 果 你 答 试 使 用 同一 个 CLR 属 性 名 字 和 同一 个 特 主 类 型 
进行 注册 ， 程 序 会 抛 出 异常。 

Be PX, RegisterCommonfs £r zy rade dde T 
PropertyMetadate， 如 果 没 有 提供 则 为 之 准备 一 个 献 认 的 
PropertyMetadate 实 例 。 当 所 有 “原料 ”都 准备 沁 当 、 没 有 问题 后 ， 
DependencyProperty 有 的 实例 被 创建 出 来 : 


DependencyProperty dp = new DependencyProperty(name, propertyType, owner Type, defaultMetadata, validate ValueCallback): 


并 且 被 注册 进 Hashtable 中 〈Hashtable 会 目 动 调用 key 的 GetHashcode 
方法 获取 其 hash code) : 


PropertyFromName|key] = dp; 


iere H, RATE MUHE DependencyProperty Z: BJ 81) Z 
Hix24P. Mi: 创建 一 个 DependencyProperty 实 例 并 用 它 的 CLR 属 性 
名 和 箱 主 类 型 名 生成 hash code， 最 后 把 hash code 和 DependencyProperty 
实例 作为 Key-Value 对 存 入 全 局 的 、 名 为 PropertyFromName 的 Hashtable 
中 。 这 样 ，WFP 属 性 系统 通过 CLR 属 性 名 和 牡 主 闫 型 名 融 可 以 从 这 个 全 
局 的 Hashtable 中 检索 出 对 应 的 DependencyProperty 实 例 。 

最 后 ， 生 成 的 DependencyProperty 实 例 被 当 作 返回 值 交 还 : 


return dp: 


注意 

有 一 点 需要 注意 : 把 DependencyProperty 实 例 注 册 进 全 局 Hashtable 时 使 用 的 key 由 CLR 属 性 
名 哈 硕 值 和 宿主 类 型 哈 硕 值 经 过 运算 得 到 ， 但 这 并 不 是 DependencyProperty 实 例 的 哈 希 值 。 每 个 
DependencyProperty 实 例 都 具有 一 个 名 为 GlobalIndex 的 int 类 型 属性 ，GlobalIndex 的 值 是 经 过 一 些 
算法 处 理 得 到 的 ， 确 保 了 每 个 DependencyProperty 实 例 的 GlobalIndex 是 唯一 的 。 


JFH., DependencyProperty HJ GetHashCode7; YAJNA E 5 : 


public override int GetHashCode() 
| 


retum Globallndex: 
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一 一 这 一 点 非常 重要 ， 因 为 明 过 这 个 值 束 可 以 直接 检索 到 某 个 
DependencyProperty 实 例 。 

人 至此， 一 个 DependencyProperty 实 例 已 经 锌 创建 并 注册 进 一 个 全 局 
HJHashtable 中 ， 下 和 耐 就 要 使 用 DependencyObject 抱 SetValue 和 GetValue 倍 
助 这 个 DependencyProperty 实 例 保 存 和 读 取 值 了 。 我 们 先 来 看 相对 比较 
答 单 的 GetValue 方 法 ， 它 的 代码 如 下 : 


public object GetValue(DependencyProperty dp) 
| 
| 


this. Verify Access(); 


if (dp == null) 


| 
l 


throw new ArgumentNullException("dp"); 


// Call Forwarded 

return GetValueEntrw 
LookupEntry(dp.GlobalIndex), 
dp, 
null, 
RequestFlags.FullyResolved).Value; 


| 
| 


方法 的 起 始 磊 干 行 均 古 为 了 校 验 传 入 参数 的 有 效 性 ， 只 有 return 一 
颁 才 是 核心 内 容 。 这 人 句 代 人 码 的 函数 欣 套 比较 深 ， 把 它 展开 可 以 写成 这 
样 : 

Entrylndex entrylndex = LookupEntry(dp.GlobalIndex ); 
EffectiveValueEntry valueEntry= — GetValueEntry(entryIndex, dp, null, ReguestFlaes.FullyResolved) 


return valueEntry. Value; 


在 这 几 句 代码 中 屡次 出 现 了 Entry 这 个 词 ，Entry 是 “入 口 ” 的 意思 。 
WPFInS AA RR Js PE 388 UCET DUEB. 的 时 候 会 - 效 值 存放 在 一 个 “小 房 
ens ç as E TA RIA R EE: | p = A. 
Ll. EA LL He & EKRA JE 性 HE. XX 这 里 说 的 “小 房间 ?实际 上 吏 是 
EffectiveValueEntry 类 的 实例 。EffectiveValueEntry 的 所 有 构造 器 都 包含 
一 个 DependencyProperty 关 型 的 参数 ， 换 句 话 说 ， 每 个 
EffectiveValueEntry al X B — ^ Dependency Property - 
EffectiveValueEntry 类 具有 一 个 名 为 PropertyIndex 的 属性 ， 这 个 属性 的 值 
实际 上 就 是 与 之 关联 的 DependencyProperty 的 GlobalIndex 属 性 值 (这 个 
值 的 由 来 我 们 在 前 面 已 经 详细 讨论 过 ) 。 

在 DependencyObject 类 的 源码 中 可 以 找 到 这 样 一 个 成 员 变 量 : 











private EffectiveValueEntry[] effective Values: 


这 个 数组 依 每 个 成 员 的 PropertyIndex 属 性 值 进行 排序 ， 对 这 个 数组 
的 操作 (如 插入 、 删 除 和 排序 等 ) 由 专门 的 算法 来 完成 。 正 是 这 个 数组 
器 我 们 提示 了 依赖 属性 存储 值 的 秘密 每 个 DependencyObject 实 例 都 
目 市 一 个 EffectiveValueEntry 关 型 数组 〈 你 可 以 把 它 理解 为 一 排 可 以 随 
时 扩建 的 “小 房间 ”) ， 当 菏 个 依赖 属性 的 值 要 被 读 取 时 ， 算 法 就 会 从 这 
个 数组 中 去 检索 值 ， 如 果 数 组 中 没有 包含 这 个 值 ， 宽 法 会 返回 依赖 属性 
的 默认 值 〈 这 个 值 由 依赖 属性 的 DefaultMetadata 来 提供 ) 。 至 此 ， 我 们 
明白 了 一 件 事情 ， 那 就 古人 被 static 关 键 字 所 修饰 的 依赖 属性 对 象 其 作用 是 
用 来 检索 真正 的 属性 值 而 不 是 存储 值 ， 伞 用 做 检索 键 值 的 实际 上 是 依赖 
属性 的 GlobalIndex 属 性 (本 质 是 其 hash code， 而 hash code 又 由 其 CLR 包 
闭 絮 名 和 答 主 类 型 名 共同 决定 ) ， 为 了 保证 GlobalIndex 属 性 值 的 稳定 
性 ， 我 们 声明 的 时 候 又 使 用 了 readonly 关 键 字 进行 修饰 。 

实际 工作 中 ， 依 赖 属性 的 值 际 了 可 能 存储 在 EffectiveValueEntry 数 
组 或 由 默认 值 提 供 外 ， 还 有 很 多 途径 可 以 获得 ， 可 能 来 目 于 元 素 的 Style 
或 Theme， 也 可 能 由 上 层 元 系 继 承 而 来 ， 还 可 能 是 在 某 个 动画 过 程 的 控 
制 下 不 断 变 化 而 来 。 我 们 怎么 知道 获取 的 值 来 和 目 于 哪里 呢 ? 原来 ，WPF 
对 依 顿 属性 信 的 谈 取 是 有 优 乞 级 控制 的 ， 由 移 到 后 依次 是 : 

(1) WPF 属 性 系统 强制 值 。 

(2) 由 动画 过 程控 制 的 值 。 

(3) 本 地 变量 值 〈 存 储 在 EffectiveValueEntry 数 组 中 ) 。 

(4) 由 上 级 元 素 的 Template 设 置 的 值 。 

(5) 由 隐 式 样式 (Implicit Style) 设置 的 值 。 

(6) 由 样式 之 触发 需 (Style Trigger? 设置 的 值 。 

(7) HU us (Template Trigger? 设置 的 值 。 

(8) HEF Z WESS (Style Setter) ix A MJH- 

(9) 由 默认 样式 (Default Style) AKE, SAW Fa R SEDE A: EH 
主题 (Theme) 指定 的 模式 。 

(10) 由 上 级 元 素 继承 而 来 的 全。 

(11) 默认 值 ， 来 源 于 依赖 属性 的 元 数据 (metadata) 。 

理解 了 GetValue 方 法 ，SetValue 方 法 也 不 再 神秘 。 

进入 这 个 方法 后 ， 首 先 验 证 依赖 属性 的 值 是 否 可 以 被 改变 ， 如 果 不 
能 则 抛 出 异常 ， 如 果 可 以 束 进 入 后 和 面 的 赋值 流程 。 赋 值 流 程 也 很 简单， 
主要 有 人 这样 几 个 操作 : 

e 检查 值 是 不 是 DependencyProperty.UnsetValue， 如 果 是 ， 说 明 调 
用 者 的 意图 是 清空 现 有 的 值 。 此 时 程序 会 调用 ClearValueCommon 方 法 





来 清空 现 有 的 值 。 

e 检 厚 EffectiveValueEntry 数 组 中 是 耕 已 经 存在 相应 依赖 属性 的 位 
置 ， 如 条 有 则 把 旧 值 改写 为 新 仁 ， 如 末 没 有 则 新 建 EffectiveValueEntry 
对 象 并 存储 新 值 。 这 样 ， 只 有 梓 用 到 的 值 才 会 被 放 进 这 个 列表 ， 人 此 ， 
WPF 系 统 用 算法 时间 ) 换取 了 对 内 存 〈 空 间 ) Hone. 

e 调用 UpdateEffectiveValue 对 新 值 做 一 些 相 应 处 理 。 

DependencyObject£lDependencyProperty V 4 2$ zi W PF [gi f: 28 £85 Hr] T 
心 ， 本 小 币 的 设立 是 为 了 帮助 大 家 理解 它们 之 间 的 关系 以 及 依赖 属性 值 
设置 、 读 取 的 人 简要 流程 。 通 过 这 一 小 节 的 搬 述 ， 锅 望 大 家 能 理解 WPF 系 
统 的 设计 理念 ， 即 以 public static 类 型 的 变量 作为 标记 并 以 这 个 标记 为 逐 
引进 行 对 象 的 存储 、 访 问 、 人 修改、 删除 等 操作 。 这 样 的 理念 在 传统 
的 .NET 开 发 体系 中 〈 如 Windows Forms、ASP.NET 等 ) 是 不 曾 出 现 的 ， 
它 是 WPF 体 系 的 创新 并 且 广 泛 应 用 《后 面 的 路 由 事件 、 命 令 系 统 等 都 会 
用 到 这 样 的 理念 ) 。 同 时 ， 我 们 也 可 以 理解 为 什么 WPF 在 性 能 上 还 不 尽 
如 人 意 ， 微 软 也 在 不 停 地 完善 这 个 机 制 ， 使 它 的 效率 进一步 提升 。 


7.3 ”附加 属性 (Attached Properties) 


理解 了 依赖 属性 后 ， 再 来 讨论 一 下 附加 属性 。 顾 名 思 义 ， 附 加 属性 
古 说 一 个 属性 本 来 不 属于 菜 个 对 象 ， 但 由 于 某 种 需求 而 被 后 来 附加 上 。 
也 束 古 把 对 象 放 入 一 个 特定 坏 境 后 对 象 才 上 其 有 的 属性 (表现 出 来 束 是 被 
环境 赋予 的 属性 ) 束 称 为 附加 属性 (Attached Properties) 。 实 际 开 发 工 
作 中 我 们 经 第 会 遇 到 这 样 的 情况 ， 比 如 有 一 个 名 为 Human 的 类 ， 它 有 可 
能 被 与 学 校 相 关 的 工作 流 用 到 《记录 它 的 专业 、 班 级 、 年 级 ) ， 也 有 可 
能 被 与 公司 相关 的 工作 流 用 到 《记录 它 的 部 门 、 项 目 ) ， 那 么 ， 设 计 类 
的 时 候 我 们 是 不 是 需要 这 样 做 呢 : 


public class Human 
| 


public int Id | get; set; ! 


/! For school workflow 

public int Majorld | get; set; | 
public int ClassId { get; set; | 
public int Gradeld | get; set; | 


|| For company workflow 
public int DepartmentId | get; set; | 
public int ProjectId | get; set; | 


显然 这 样 做 不 太 人 合适， 因为 一 旦 流程 有 所 改变 ， 这 个 类 的 实现 束 需 
要 做 改动 ， 也 融和 是 说 这 个 类 总 是 不 能 和 梓 关闭 。 而 且 ， 如 末 东 些 Human 凑 
型 的 实例 只 用 于 与 公司 相关 的 流程 ， 那 么 其 MajorId、ClassId、Gradeld 
e ^ Br E FH BS AFIR Y. 
再 回想 一 下 学 习 布 局 时 过 到 的 例子 。 如 果 在 Grid 里 对 一 个 TextBox 
定位 ， 代 码 会 是 这 样 : 
«Gnd ShowGrdLines-" True > 
«Grnd.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition /> 
«ColumnDefinition /> 
«fand. ColumnDefinitions? 
«Grid. RowDefinitions? 
<RowDefinition /> 
<RowDefinition /> 
<RowDefinition /> 
</Grid.RowDefinitions> 
<TextBox Background="Lime" Grid.Column="1" Grid.Row="1" /> 
</Qnd> 


运行 效果 如 图 7-9 所 示 。 
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如 果 TextBox 被 放置 在 Canvas 里 ， 则 代码 会 是 这 样 : 


«Canvas Margin="10"> 
<TextBox Backeround="Lime" Width-"200" Canvas.Topz"0" /> 
<TextBox Background="Lime" Width-"200" Canvas.Topz" 30" /> 
<TextBox Backeround="Lime" Width-"200" Canvas.Topz"60" /> 
</Canvas> 











图 7-10 ”运行 效果 
放 在 DockPanel 里 ， 代 码 会 是 这 样 : 


<DockPanel LastChildFill-" False" 
«TextBox Background- "Orange" DockPanel.Dockz" Top" /> 
«TextBox Background-" Orange" DockPanel.Dockz "Bottom" /> 
«TextBox Background-" Green" Width-" 80" DockPanel.Dockz"Left" /> 
«TextBox Background-" Green" Width-" 80" DockPanel.Dockz"Right" /> 
</DockPanel> 


运行 效果 如 图 7-11 所 示 。 





图 7-11 ”运行 效果 
放 在 StackPanel 里 最 省 事 : 
«StackPanel Margin" 10,5" 
«TextBox Background-" LightBlue" Margin-"0,5" /> 
«TextBox Background-" LightBlue" Margin-"0,5" /> 
«TextBox Background-" LightBlue" Margin-"0,5" /> 
</StackPanel> 


运行 效果 如 图 7-12 所 示 。 





图 7-12 ”运行 效果 


作为 TextBox 控 件 的 设计 者 ， 他 不 可 能 知道 控件 友 布 后 程序 员 是 把 
它 放 在 Grid 里 还是 Canvas 里 〈 甚 至 是 以 后 版 本 将 推出 的 新 布局 里 ) ， 所 
以 他 也 不 可 能 为 TextBox 准 备 诸如 Column、Row 或 者 Left、Top 这 类 属 
性 ， 那 么 干脆 让 布局 来 决定 一 个 TextBox 用 什么 属性 来 设置 它 的 位 置 
IE! 放 在 Grid 里 就 让 Grid 为 它 附 加 上 Column 和 Row 属性 ， 放 在 Canvas 里 
加 让 Canvas 为 它 附 加 上 Top、Left 等 属性 ， 放 在 DockPanel 里 就 让 
DockPanel 为 它 附 加 Dock 属 性 。 可 见 ， 附 加 属性 的 作用 束 是 将 属性 与 数 
RW GEE) 解 炸 ， 让 数据 类 型 的 设计 更 加 灵活 。 

理解 了 附加 属性 的 合 义 ， 我 们 开始 研究 附加 属性 的 声明 、 注 册 和 使 
用 。 附 加 属性 的 本 质 就 是 依赖 属性 ， 二 者 仪 在 注册 和 包 泌 途上 有 一 点 区 
别 。 前 面 说 过 ，Visual Studio ”2008 用 于 快速 创建 依赖 属性 的 snippet 是 
propdp， 现 在 我 们 要 使 用 男 一 个 snippet 是 propa， 这 个 snippet 用 于 快速 创 
建 附 加 属性 。 以 人 在 学 校 里 会 获得 年 级 和 班级 两 个 属性 为 例 ， 我 们 来 体 
验 目 定义 附加 属性 。 

人 了 攻 在 学 校 里 会 获得 年 级 和 班级 两 个 属性 说 明年 级 和 班级 两 个 属性 
古 由 学 校 附 加 给 入 的 ， 因 此 ， 这 两 个 属性 的 真实 所 有 者 〈 箱 主 ) 应 该 是 
和 学校。 我们 准备 一 个 名 为 School 的 类 ， 并 让 它 继 承 DependencyObject 
类 ， 然 后 把 光标 定位 于 类 体 中 (人 花 括号 之 间 〉 ， 输 入 propa， 当 Visual 
Studio ”2008 的 代码 提示 列表 高 亮 显 示 时 《〈 如 图 7-13 所 示 ) 连 按 两 下 Tab 
键 ， 一 个 附加 属性 的 框架 天 准备 好 了 。 继 续 按 动 Tab 键 可 以 在 儿 个 空缺 
间 轮 换 并 修改 ， 下 至 投下 Enter 键 。 


class School: DependencyObject 


pro pal — 


I Processin putEventHandler 
Ag ProgressBar 


| 


=] prop 

S] propa s 
=] propdp 

(9 Properties - 





图 7-13 Visual Studio 2008 的 Snippet 功 能 
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class School : DependencyObject 


[ 
| 


public static int GetGrade( Dependency Object obj) 
| 
return (int)ob].GetValue(GradeProperty): 


public static void SetGrade( DependencyObject obj, int value) 
| 
obl.SetValue( GradeProperty, value); 


public static readonly DependencyProperty GradeProperty = 
DependencyProperty.ReglsterAttached( Grade", typeof(int), typeof(School), new UIPropertyMetadata(0)); 


I 
| 


可 以 很 明显 地 看 出 ，GradeProperty 束 是 一 个 DependencyProperty 类 
型 成 员 变 量 ， 声 明 时 一 样 使 用 public static readonly 三 个 关键 字 共 同 修 
俩 。 唯 一 的 不 同 束 是 注册 附加 属性 使 用 的 是 名 为 RegisterAttached 的 方 
法 ， 但 参数 却 与 使 用 Register 方 法 无 寞 。 附 加 属性 的 包装 占 也 与 依赖 属 
性 不 同 依赖 属性 使 用 CLR 属 性 对 GetValue 和 SetValue 两 个 方法 进行 
包 竣 ， 附 加 属性 则 使 用 两 个 方法 分 别 进行 包 状 一 一 这 梯 做 完全 是 为 了 在 
使 用 的 时 候 保 持 语 句 行 文 上 的 通畅 。 

如 何 消费 School 的 GradeProperty 呢 ?首先 ， 我 们 要 准备 一 个 派生 目 
DependencyObject、 名 为 Human 的 类 : 





class Human : DependencyObject 


| 
| 


1 
| 


在 UI 上 准备 一 个 Button 并 把 下 和 面 的 代码 作为 其 Click 事 件 的 处 理 右 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
Human human = new Human(); 
School.SetGrade(human, 6); 
int grade = School.GetGrade(human); 
MessageBox.Show(grade.ToString()): 
| 
运行 程序 并 单 击 按钮 ， 效 果 如 图 7-14 所 示 。 


| B ' Attached 














图 7-14 ”运行 效果 


剖析 .NET Framework 源 码 ， 你 会 发 现 这 一 过 程 与 前 面 依赖 属性 保存 


值 的 过 程 别 无 二 致 值 仍 然 被 保存 在 Human 实 例 的 
EffectiveValueEntry 数 组 里 ， 只 是 用 于 在 数组 里 检索 值 的 依赖 属性 〈 即 
附加 属性 ) 并 不 以 Human 类 为 御 主 而 是 寄 御 在 School 类 里 ， 可 那 又 有 什 
ARAE 反正 CLR 属 性 名 和 牡 主 类 型 名 只 用 来 生成 hash code 和 
GlobalIndex. 








让 我 们 回 到 现实 工作 中 ， 看 看 如 何 把 下 面 这 段 XAML 人 代码 改写 成 等 
效 的 C# 代 码 : 
«Grid ShowGridLines-" True 
«Grnd.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition /> 
«ColumnDefinition /> 
</Grid.ColumnDefinitions> 
<Grid.RowDefinitions> 
<RowDefinition /> 
<RowDefinition /> 
<RowDefinition /> 
</Grid.RowDefinitions> 
«Button Content-" OK" Grid.Column="1" Grid.Row="1" /> 
<JGnd> 


与 乙 等 效 的 C# 代 但 是 : 


public Window]l() 
| 


InitializeComponent(); 


I| 在 构造 器 中 调用 


InitializeLayout(); 


private void InitializeLayout() 


| 
Grid grid = new Grid() | ShowGridLines = true j; 


grid.ColumnDefinitions.Add(new ColumnDefinition()); 


$ 


erid.ColumnDefinitions.Add(new ColumnDefinition 


$ 


Q) 
grid. ColumnDefinitions.Add(new ColumnDefinition()) 
erid. RowDefimitions.Add(new RowDefinition()); 


grid. RowDefinitions.Add(new RowDefinition{)); 
grid. RowDefinitions.Add(new RowDefinition()); 


Button button = new Button() | Content = "OK" 1; 
Grid.SetColumn(button, 1); 


Grid.SetRow(button, 1); 


erid.Children.Add(button ); 
this. Content = grid; 


运行 效果 如 图 7-15 所 示 。 





图 7-15 “运行 效果 


现在 我 们 已 经 知道 如 何在 XAML 和 C# 代 人 码 中 直接 为 附加 属性 赋值 ， 
不 过 别 态 了， 附加 属性 的 本 质 是 依赖 属性 一 一 附加 属性 也 可 以 使 用 
Binding 依 赖 在 其 他 对 象 的 数据 上 。 请 看 下 面 这 个 例子 : 窗 体 使 用 Canvas 
局 ， zc 来 控制 定形 在 Canvas 中 的 横 纵 坐标 。 程 序 的 效果 如 
7/-16H"T7zR. 












































图 7-16 ”运行 效果 


实现 这 个 需求 的 XAML 代 码 如 下 : 


<Canvas> 

«Slider x: Name-"sliderX" Canvas.Top-" 10" Canvas.Left-" I0" Width= 260" 
Mimmum= 50" Maximum- "200" /> 

«Slider x: Name-"sliderY" Canvas. Top-" 40" Canvas.Left-" 10" Width- 260" 
Minimum" 50" Maximum-" 200" /> 

«Rectangle x: Name-"rect" Fill="Blue" Width= 30 Height-" 30" 
Canvas.Leftz" [Binding ElementNamezsliderX, PathzValue]" 
Canvas. Iop= [Binding ElementNamezsliderY, PathzValue]" /> 


Canvas 

与 之 等 效 的 C# 代 码 为 〈 仅 Binding 部 分 ) : 
public Window1() 
| 


InitializeComponent(); 


// 1X & Binding 
this.rect.SetBinding( Canvas.LeftProperty, new Binding(" Value") | Source = sliderX |); 
this.rect.SetBinding(Canvas. TopProperty, new Binding(" Value") | Source = sliderY ; ): 
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就 像 属 性 系统 在 WPF 中 得 到 升级 、 进 化 为 依赖 属性 一 样 ， 事 件 系统 
在 WPF 中 也 被 升级 一 一 进化 成 为 路 由 事件 (Routed Event) ， 并 在 其 基 
础 上 衍生 出 命令 传递 机 制 。 这 些 机 制 在 很 大 程度 上 减少 了 对 程序 员 的 束 
缚 ， 让 程序 的 设计 和 实现 更 加 灵活 ， 模 块 之 则 的 看 合 皮 也 进一步 降低 。 
本 章 束 让 我 们 一 起 来 领略 这 些 新 消息 机 制 的 风采 。 


8.1 近 观 WPE 的 树 形 结构 


H (Route) 一 词 的 大 痘 是 这 样 : 起 点 与 终点 则 有 奢 干 个 中 转 
站 ， 从 起 点 出 发 后 经 过 每 个 中 转 站 时 要 做 出 选择 ， 最 终 以 正确 (比如 最 
短 或 者 最 快 ) 的 路 径 到 达 终 点 。 编 程 的 本 质 是 用 编译 器 〈 有 时 要 借助 类 
E) 来 扩展 操作 系统 的 功能 ， 所 以 ， 程 序 的 基本 运行 不 可 能 脱离 操作 系 
统一 一 Windows 本 和 纺 束 是 一 种 消 奶 驱动 的 操作 系统 ， 所 以 我 们 的 程序 注 
定 痢 是 消 晨 驱动 的 ， 程 序 运行 的 时 候 也 要 把 目 己 的 消 忆 系统 与 整个 操作 
系统 的 消息 系统 “连通 ?才能 够 被 执行 和 啊 应 。 纵 观 几 代 Windows 平 侣 程 
序 开 发 ， 最 早 的 Windows _ API 开发“〈C 语 言 )》 和 MFC 开 发 我 们 可 以 直接 
看 到 各 种 消息 并 可 以 定义 自己 的 消息 ;， 到 了 COM 和 VB 时 代 ， 消 息 被 封 
装 为 事件 (Event) 并 一 直 沿 用 至 .NET 平 台 开 发 一 ”无 论 怎 么 说 ， 程 序 
间 模 块 使 用 消 恩 互相 通信 的 本 质 是 没有 改变 的 。 从 Windows API 开 发 到 
传统 的 .NET 开 发 ， 消 息 的 传递 〈 或 者 说 事件 的 激发 与 啊 应 ) 都 是 直接 模 
式 的 ， 即 消 恩 下 接 由 发 送 者 交 给 接收 者 (或 者 说 事件 簿 主 友 生 的 事件 下 
接 由 事件 响应 者 的 事件 处 理 器 来 处 理 ) 。WPF 把 这 种 直接 消息 模型 升级 
为 可 传递 的 消息 模型 前面 我 们 已 经 知道 WPF 的 UI 是 由 布局 组 件 和 控 
件 构 成 的 树 形 结构 ， 当 这 棵 树 上 的 素 个 结 点 油 发 出 某 个 事件 时 ， 程 序 员 
可 以 选择 以 传统 的 直接 事件 模式 让 啊 应 者 来 啊 应 之 ， 也 可 以 让 这 个 事件 
在 UI 组 件 树 沿 着 一 定 的 方 同 传递 且 路 过 多 个 中 转 结 点 ， 并 在 这 个 路 由 过 
程 中 被 恰当 地 处 理 。 你 可 以 把 WPF 的 路 由 事件 看 成 是 一 只 小 蚂蚁 ， 它 可 
ELM aeu Cmn] 目标 肘 行 ， 每 路 过 一 个 树 权 的 分 又 点 残 
会 把 消息 带 给 这 个 分 叉 点 。 

因为 WPF 事 件 的 路 由 环境 是 UI 组 件 树 ， 所 以 我 们 有 必要 仔细 研究 一 





下 这 标 树 。 

WPF 中 有 两 种 “ 树 ”: 一 种 叫 馆 辑 树 (Logical Tree) ; 一 种 叫 可 视 元 
A) (Visual Tree) . MERA sas 3k 23 Kal! 其 实 很 简单 ， 前 面 我 
们 见 到 的 所 有 树 形 结构 都 是 Logical Tree, Logical Tree 最 显著 的 特点 就 
是 它 完 全 由 布局 组 件 和 控件 构成 (包括 列表 类 控件 中 的 条 上 日 元 素 ) , £ 
句 话 说 惑 是 它 的 每 个 结 点 不 是 布局 组 件 束 是 控件 。 那 什么 是 Visual Tree 
呢 ? 我 们 知道 ， 如 果 把 一 请 树 叶 放 在 放大 镜 下 观察 ， 你 会 发 现 这 瞩 叶 子 
也 像 一 标 “ 树 ”一 样 一 有 目 己 的 基部 并 同上 生长 出 多 级 分 又 。 在 WPF 的 
Logical Tree 上 ， 充 当时 子 的 一 般 都 是 控件 ， 如 果 我 们 把 WPEF 的 控件 也 放 
在 “放大 镜 ” 下 去 观察 ， 你 会 发 现 每 个 WPF 控 件 本 里 也 是 一 棵 由 更 细微 级 
别 的 组 件 ( 它 们 不 是 控件 ， 而 是 一 些 可 视 化 组 件 ， 派 生日 Visual 类 ) 组 
成 的 树 。 用 来 观察 WPF 控 件 的 放大 镜 是 我 们 前 面 提 及 的 Blend， 使 用 
Blend 可 以 解剖 并 观察 一 个 控件 的 模板 ‘Template〉 是 怎样 的 ， 如 图 8-1 
所 示 。 上 有 目前 你 可 以 把 Template 理 解 为 控件 的 骨架 ， 我 们 甚至 在 保证 控件 
功能 不 丢失 的 情况 下 为 控件 换 一 副 新 上 骨架， 让 它 更 深 渤 〈 后 面 的 章 贡 会 
详细 讨论 ) 。 


Objects and Timeline 


-. ProoressBarStyle1 (ProgressBar Template) 


v œ Template 





* iE Background 
O [Rectangle] 
= [Border] 
= [Border] 
—! PART Track 
= PART Indicator 
ii Foreground 
LJ Indicator 
L] Animation 
mEE- 
LJ RightDark 
C LeftLight 
O Centertight 
LJ RightLight 
= Highlight 


Ll Highhightz 
=: [Border] 





图 8-1 控件 的 Temlate 


上 图 十 一 个 进度 条 被 拆 解 后 的 民 示 。 在 日 第 的 编程 工作 中 ， 进 度 条 
总 是 以 一 个 整体 控件 的 角色 出 现在 Logical Tree 中 发 挥 它 的 作用 。 但 有 时 
候 我 们 也 需要 把 它 拆 解 开 ， 重 新 为 它 设 计 内 部 结构 ， 比 如 我 力 把 一 个 进 
度 条 改造 成 一 个 温度 计 ， 束 需要 在 它 的 内 部 添加 显示 刻度 的 组 件 、 改 变 


它 的 填充 闫 色 每 。 如 图 8-2 所 示 是 进度 条 的 内 部 结构 树 形 图 : 


[see 
” “7 个 Rectangle 显示 


局 亮 与 动画 
Border 





图 8-2 ”进度 条 的 内 部 结构 树 形 图 


如 果 把 Logical Tree 延伸 至 Template 组 件 级 别 ， 我 们 得 到 的 吏 是 
Visual Tree。 实际 工作 中 ， 大 多 数 情 况 下 我 们 是 在 与 Logical Tree 打 交 
道 ， 有 了 时候 为 了 实现 一 些 琼 手 的 功能 会 回 Visual Tree 求助 ， 依 个 人 匈 
解 ， 如 果 你 的 程序 需要 借助 Visual Tree 来 完成 一 些 与 业务 逻辑 〈 而 不 是 
ZU HEATH) 相关 的 芒 能 ， 多 半 是 由 程序 设计 不 民 而 造成 的 ， 请 重新 考 
虑 锡 辑 、 蕊 能 和 数据 类 型 方面 的 设计 。 

如 果 想 在 Logical Tree 上 导航 或 查找 元 素 ， 可 以 信 助 
LogicalTreeHelper 类 的 static 方 法 来 实现 : 

e BringIntoView: 把 选 定 元 系 市 进 用 户 可 视 区 域 ， 经 常用 于 可 深 
动 的 视图 。 

e FindLogicalNode: {ZA EFK (Namek HA) ARNA, GA 
TZ FW. 

e GetChildren: AMA EL 2k T 27698 ° 

e GetParent: 3X3 ELPE Z ZK JUR e 

如 果 想 在 Visual Tree 上 叶 航 或 查找 元 系 ， 则 可 借助 VisualTreeHelper 
类 的 static 方 法 来 实现 。 请 大 家 查阅 MSDN 文 档 ， 此 处 不 再 著述 。 

现在 我 们 已 经 知道 ，WPF 的 UI 可 以 表示 为 Logical Tree 和 Visual 
Tree， 那 么 当 一 个 路 由 事件 被 沿 发 后 是 沿 厦 Logical Treek 61 E TT 
Visual Tree 传 递 呢 ?答案 是 Visual Tree 只 有 这 样 , GSR (ETemplate H 
的 控件 才能 把 消息 送出 来 。 

Logical Tree 与 Visual Tree 的 区 列 在 后 面 讲 述 资 源 〈Resource) 时 还 





会 扣 a 到 ， 届 时 请 大 家 返回 来 看 一 看 。 
8.2 事件 的 来 龙 去 脉 


事件 的 前 身 是 消息 (Message) 。Windows 是 消息 驱动 的 操作 系 
统 ， 运 行 其 上 的 程序 也 巡 照 这 个 机 制 运行 。 消 晨 本 质 束 是 一 条 数据 ， 这 
条 数据 里 记载 着 消息 的 类 别 ， 必 要 的 时 候 还 记载 一 些 消 息 参 数 。 比 如 ， 
当 你 在 窗 体 上 投下 鼠标 左 键 的 时 候 ， 一 条 名 为 VM_LBUTTONDOWN 澳 
息 就 被 生成 并 加 入 Windows 待 处 理 的 消息 队列 中 一 一 大 部 分 情况 下 
Windows 的 消 居 队列 里 不 会 有 太 多 消 明 在 排队 、 消 恩 会 并 刻 被 处 理 ， 如 
果 你 的 计算 机 很 慢 并 且 处 在 很 忙 的 状态 (如 播放 电影 3 ， 那 么 这 条 消 忆 
束 要 等 一 会 才 侯 处 理 到 ， 这 束 古 常见 的 操作 系统 反应 延 人 运 。 当 Windows 
处 理 到 这 条 消息 时 会 把 消息 发 送 给 你 单 击 的 窗 体 ， 窗 体会 用 自己 的 一 套 
算法 来 响应 这 个 消息 ， 这 个 算法 就 是 windows API 开 发 中 背 说 的 消息 处 
理子 数 。 消 居 处 理 函 数 中 有 一 个 多 级 藤 套 的 switch 结 构 ， 进 入 这 个 
switch 结 构 的 消息 会 被 分 门 别 类 并 最 终 流入 某 个 末端 分 文 ， 在 这 个 分 文 
里 会 有 一 个 由 程序 员 编 写 的 函数 被 调用 。 例 如 对 于 
WM_LBUTTONDOWN 这 个 消 奶 ， 程 序 员 可 能 会 编写 一 个 函数 来 查看 它 
所 携带 的 参数 〈 即 鼠标 单 击 处 的 X、Y 坐 标 ) ， 然 后 决定 是 把 它们 显示 
出 来 还 是 在 这 个 点 上 绘制 图 形 等 。 也 有 些 消息 是 不 用 携带 参数 的 ， 比 如 
按钮 被单 击 的 消 轧 ， 当 它 流入 某 个 分 文 后 程序 员 束 已 经 知道 是 按钮 被 单 
击 了 ， 程 序 员 并 不 关心 鼠标 点 在 按钮 的 哪个 位 置 上 了 。 

上 面 叙 述 的 过 程 就 是 消息 触发 算法 逻辑 的 过 程 ， 又 称 消 息 驱 动 。 这 
样 一 个 过 程 对 于 想 入 门 Windows 开 及 的 人 来 说 门槛 太 高 ， 对 于 大 型 的 
Windows 程 序 来 说 开发 与 维护 成 本 也 不 低 。 随 着 微软 面 癌 对 象 开 发 平台 
日 趋 成 熟 ， 微 软 把 消息 机 制 封 雄 成 了 更 容 多 让 人 理解 的 事件 模型 。 

事件 模型 隐藏 了 消息 机 制 的 很 多 细节 ， 让 程序 的 开发 变 得 简单 。 烦 
开 的 消息 张 动机 制 在 事件 模型 中 被 徐 化 为 3 个 关键 点 : 

e 事件 的 拥有 者 : 即 消息 的 发 送 者 。 事 件 的 宿主 可 以 在 某 些 条 件 
下 激 友 它 拥 有 的 事件 ， 即 事件 被 触发 。 事 件 科 触发 则 消息 被 及 送 。 

e 事件 的 啊 应 者 : 即 消息 的 接收 者 、 处 理 者 。 事 件 接收 者 使 用 其 
事件 处 理 器 (Event Handler) 对 事件 做 出 啊 应 。 

e 事件 的 订阅 关系 : 事件 的 拥有 者 可 以 随时 诉 肥 事件 ， 但 事件 及 
生 后 会 不 会 得 到 啊 应 要 看 有 没有 事件 的 啊 应 者 ， 或 者 说 要 看 这 个 事件 是 
合 被 关注。 如 果 对 象 A 关注 对 象 B 的 某 个 事件 是 否 发 生 ， 则 称 A 订 阅 了 B 
的 事件 。 更 进一步 讲 ， 事 件 实际 上 是 一 个 使 用 event 关 键 字 修饰 的 委托 
(Delegate) 类 型 成 员 变 量 ， 事 件 处 理 喜 则 是 一 个 图 数 ， 说 A 订 陪 了 B 的 


事件 ， 本 质 上 就 是 让 B.Event 与 A.EventHandler 关 联 起 来 。 所 谓 事 件 激 发 
驶 是 B.Event 航 调用 ， 这 时 ， 与 其 关联 的 A.EventHandler 束 会 被 调用 。 
事件 模型 可 以 用 如 图 8-3 所 示 的 模型 作为 简要 说 明 : m 
FAAFIA EE 事件 的 啊 应 者 


事件 处 理 器 





图 8-3 ”事件 模型 


在 这 种 模型 里 ， 事 件 的 啊 应 者 通过 订 疝 关系 直接 关联 在 事件 拥有 者 
的 事件 上 ， 为 了 与 WPF 的 路 由 事件 模型 区 分 开 ， 我 把 这 种 事件 模型 称 为 
直接 事件 模型 或 者 CLR 事 件 模 型 。 因 为 CLR 事 件 本 质 上 是 一 个 用 event 关 
刍 字 修饰 的 委托 实例 ， 我 们 暂且 模仿 CLR 属 性 的 说 法 ， 把 CLR 事 件 定 义 
为 一 个 委托 类 型 实例 的 包装 器 或 者 说 有 一 个 委托 类 型 实例 在 支持 
(backing) 一 个 CLR 事 件 。 

让 我 们 看 一 个 例子 。 新 建 一 个 windows Form 项 目 ， 在 窗 体 上 放置 
一 个 按钮 并 命名 为 myButton。 双 击 按 钮 ，Visual Studio 会 目 动 为 我 们 创 
建 myButton 的 Click 事 件 处 理 器 (myButton_Click 方 法 ) 并 跳 转 到 其 中 。 
这 时 ， 一 个 完整 的 直接 事件 模型 束 实 现 了 ， 让 我 们 识别 一 下 事件 模型 的 
儿 个 关键 部 分 : 
事件 的 拥有 者 : myButton。 
事件 : myButton.Click. 
事件 的 啊 应 者 : RPG. 
事件 处 理 器 : this.myButton_Click 方 法 。 
订阅 天 系 : 可 以 在 Form1.Designer.cs 文 件 中 找到 的 一 名 代码 是 


this.myButton.Click += new System.EventHandler(this.myButton Click); 


此 句 即 为 确立 订阅 关系 的 代码 。 
我 们 实现 myButton_Click 方 法 的 代码 如 下 : 


private void myButton Click(objeet sender, EventArgs e) 
| 
i (sender is Button) 


| 


MessageBox.Show((sender as Button).Name); 


myButton 








图 8-4 ”运行 效果 
这 说 明 在 CLR 和 直接 事件 模型 中 ， 事 件 的 拥有 者 就是 消 恩 的 发 送 者 
(sender) 。 

表面 这 个 例子 是 百 接 事件 模型 最 简单 的 应 用 ， 实 际 上 ， 只 要 文 持 事 
件 的 委托 与 影响 事件 的 方法 在 签名 上 保持 一 致 〈 即 参数 列表 和 返回 值 一 
S , ， 则 一 个 事件 可 以 由 多 个 事件 处 理 喜 来 啊 应 〈 多 播 事 件 ) 、 一 个 事 
件 处 理 需 也 可 以 用 来 啊 应 多 个 事件 。 在 此 殉 不 一 一 举例 了 。 

直接 事件 模型 是 传统 .NET 开 发 中 对 象 间 相互 协同 、 沟 通信 息 的 主要 
手段 ， 它 在 很 大 程度 上 简化 了 程序 的 开发 。 然 而 直接 事件 模型 并 不 完 
美 ， 它 的 不 完 闫 之 处 束 在 于 事件 的 啊 应 者 与 事件 拥有 者 之 则 必须 建 并 事 
件 订 阅 这 个 “专线 联系 ”。 这 样 至 少 有 两 个 弊端 ; 

e 每 对 消 因 是 “发 送 啊 应 ”关系 ， 必 须 建立 显 式 的 点 对 点 订阅 关 


ZJN O 


° 事件 的 宿主 必须 能 够 直接 访问 事件 的 响应 者 ， 不 然 无 法 建立 订 
IS A. 
注意 

直接 事件 模型 的 弱点 会 在 下 面 两 种 情况 中 显露 出 来 ; 

(1) 程序 运行 期 在 容器 中 动态 生成 一 组 相同 控件 ， 每 个 控件 的 同一 个 事件 都 使 用 同一 个 
事件 处 理 器 来 蜂 应 。 面 对 这 种 情况 ， 我 们 在 动态 生成 控件 的 同时 就 需要 显 式 书写 事件 订阅 代 
” (D 用 户 控件 的 内 部 事件 不 能 被 外 界 所 订阅 ， 必 须 为 用 户 控件 定义 新 的 事件 用 以 向 外 界 
暴露 内 部 事件 。 当 模块 划分 很 细 的 时 候 ，UI 组 件 的 层级 会 很 多 ， 如 果 想 让 很 外 层 的 容器 订阅 深 
层 控件 的 某 个 事件 就 需要 为 每 一 层 组 件 定义 用 于 暴露 内 部 事件 的 事件 、 形 成 事件 链 。 


路 由 事件 的 出 现 很 好 地 解决 了 了 上述 两 种 情况 中 出 现 的 问题 ， 下 一 市 
我 们 就 来 研究 路 由 事件 的 使 用 。 


83 深入浅出 路 由 事件 


为 了 降低 由 事件 订阅 市 来 的 东 合 度 和 代码 量 ，WPF 推 出 了 路 由 事件 
机 制 。 路 由 事件 与 直接 事件 的 区 别 在 于 ， 下 接 事 件 激 发 时 ， 发 送 者 直接 
将 消 晨 通过 事件 订阅 交 送 给 事件 啊 应 者 ， 事 件 啊 应 者 使 用 其 事件 处 理 器 
方法 对 事件 的 友 生 做 出 啊 应 、 驱 动 程序 好 辑 按 客户 需求 运行 ， 路 由 事件 
的 事件 拥有 者 和 事件 啊 应 者 之 间 则 没有 直接 显 式 的 订阅 关系 ， 事 件 的 拥 
有 者 只 负责 激发 事件 ， 事 件 将 由 谁 啊 应 它 并 不 知道 ， 事 件 的 啊 应 者 则 安 
儿 有 事件 侦 听 器 ， 针 对 荣 类 事件 进行 侦 听 ， 当 有 此 类 事件 传递 至 此 时 事 
件 啊 应 者 束 使 用 事件 处 理 妖 来 啊 应 事件 并 决定 事件 是 否 可 以 继续 传递。 
举 个 例子 ， 在 Visual Tree 上 有 一 个 Button 控 件 ， 当 它 被 单 击 后 就 相当 于 
它 喊 了 一 声 “ 我 被 单 击 了 ”， 这 样 一 个 Button.Click 事 件 就 开始 在 Visual 
Tree 传播 ， 当 事件 经 过 某 个 结 点 时 如 果 这 个 结 点 没有 安装 用 于 侦 听 
Button.Cjlick 事 件 的 * 耳 东 ”， 那 么 它 会 无 视 这 个 事件 ， 让 和 它 畅 通 无 阳 地 继 
续 传播 ， 如 果 某 个 结 点 安装 了 针对 Button.Click 的 侦 听 器 ， 它 的 事件 处 理 
全 束 会 被 调用 《〈 侦 上 听 者 并 不 关心 具体 哪个 Button 的 Click 事 件 和 被 传 来 ， 即 
任何 一 个 传 来 的 Button.Click 事 件 都 会 被 优 昕 到) ,— TESTE S VJ REF 
员 可 以 和 但 看 路 由 事件 原始 的 出 发 点 是 哪个 控件 、 上 一 站 是 哪里 ， 还 可 以 
决定 事件 传递 到 此 为 止 还 是 可 以 继续 传递 一 一 路 由 事件 就 是 这 样 依 
靠 * 口 耳 相 传 > 的 办 法 将 消息 传 给 “关心 2” 它 的 控件 。 

顺便 说 一 句 ， 尺 管 WPF 推 出 了 路 由 事件 机 制 ， 但 它 仍 然 支持 传统 的 
直接 事件 模型 。 本 市 我 们 束 聊 聊 路 由 事件 的 使 用 ， 先 谈 WPF 系 统 内 置 路 
由 事件 的 使 用 ， 有 再 谈 如 何 霄 明和 使 用 目 定义 路 由 事件 。 


8.3.1 使 用 WPF 内 置 路 由 事件 








WPF 系 统 中 的 大 多 数 事件 都 是 可 路 由 事件 ， 可 路 由 事件 在 MSDN 文 
档 里 会 具有 Routed Event Information 一 栏 ， 使 用 者 可 以 通过 这 一 栏 信 息 
了 解 如 何 啊 应 这 一 路 由 事件 。 我 们 以 Button 的 Click 事 件 来 说 明 路 由 事件 
的 使 用 。 请 看 下 面 的 例子 。 

XAML 代 人 码 如 下 : 


<Window x:Class="WpfApplication 1. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlins:x-"http://schemas.mierosoft.com/winfx/2006/xaml" Title-"Routed" 
Height-"200" Width="200"> 
«Gnd x:Name-" gridRoot" Background" Lime" 
«Gnd x:Name-" eridA" Margin-" 10" Background-" Blue"? 
«Grid.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefrmition /> 
</Grid.ColumnDefinitions> 
<Canvas x:Name="canvasLeft" Grid.Column="0" Background="Red" Margin="10"> 
«Button x:Name= buttonLeft" Content= Lett Width="40" Height= 100" 
Margin-" 10" /> 
«i Canvas 
«Canvas x: Name-"canvasRight" Grid.Column-" |" Background-" Yellow" Margin" 10" 
«Button x:Name= buttonRight" Content= Right" Width- "40" Height-" 100" 
Margin" 10" /> 
«/ Canvas? 
«Gnd» 
</Grid> 
«Window 


其 运行 效果 和 Logical Tree 结构 如 图 8-5 所 示 。 


Window 





canvasLeft canvasRight 























buttonLett buttonRight 


Klg-5 ”运行 效果 和 Logical Tree 结构 


当日 击 buttonLeft 时 ，Button.Click 事 件 束 会 沿 看 
buttonLeft > canvasLeft gridA > girdRoot Window 这 条 路 线 同 上 传送 ; 
早 击 buttonRight， 则 Button.Click 事 件 沿 着 
buttonRight > canvasRight > gridA > gridRoot Window 跤 线 传送 。 因 为 目 
前 还 没有 哪个 控件 侦 听 Button.Click 事 件 ， 所 以 单 击 按钮 后 尽管 事件 同上 
传递 却 并 没有 党 到 啊 应 。 下 面 ， 让 我 们 为 gridRoot 安 猴 针 对 Button.Click 
EEE JAIN TA < 

HIRIRA, MEE RAAE as rH UH gridRootH]AddHandler7; 
12:30 28 Hs Ur EP) SE j SE IPS] AE E S S RR: 


public Window]() 
| 
InitializeComponent(); 
this.gridRoot. AddHandler(Button.ClickEvent, new RoutedEventHandler(this.ButtonClicked)); 


| 


AddHandler 方 法 源 日 UIElement 类 ， 了 也 束 古 说 ， 所 有 UI 控件 都 有 具有 
这 个 方法 。 书 写 AddHandler 方 法 时 你 会 发 现 它 的 第 一 个 参数 是 


Button.ClickEvent 而 不 是 Button.Click。 原 来，WPEF 的 事件 系统 也 使 用 了 
与 属性 系统 类 似 的 “静态 字段 -包装 硕 ” 的 案 略 。 也 束 古 说 ， 路 由 事件 本 
壬 是 一 个 RoutedEvent 类 型 的 静态 成 员 变 量 (Button.ClickEvent) , 

Button 还 有 一 个 与 之 对 应 的 Click 事 件 (CLR 包 装 ) 专门 用 于 对 外 界 骏 露 
这 个 事件 。“ 名 字 叫 路 由 事件 ， 可 我 却 得 选择 一 个 静态 字段 "?"， 这 是 很 多 
安 学 者 所 迷惑 的 地 方 〈 如 图 8-6 所 示 ) 。 上 所 以 ， 我 们 不 妨 效 仿 依赖 属 

性 ， 把 路 由 事件 的 CLR 包 装 称 为 “CLR 事 件 ”*"。 如 此 ， 就 像 每 个 依赖 属性 
拥有 目 己 的 CLR 属 性 包装 一 样 ， 每 个 路 由 事件 都 拥有 目 己 的 CLR 事 件 。 


public Window] 

| 
InittalizeComponent(). 
this.gridRoot.AddHandler(Sutton. 


| | 4 BorderBrushProperty 


| 9 BorderThicknessProperty 
| d ClickEvent. ees 
^ ClickModeProperty 
| 9 ClipProperty 
|? ClipToBoundsProperty 








图 8-6 ”路 由 事件 是 静态 字段 


上 面 的 代码 让 最 外 层 的 Grid (gridRoot) 能 够 捕捉 到 从 内 部 “ 飘 ” 出 
来 的 按钮 单 击 事件 ， 捕 捉 到 后 会 用 this.ButtonClicked 方 法 来 进行 啊 应 处 
理 。ButtonClicked 方 法 代 人 如 下 : 


private void ButtonClicked(object sender, RoutedEventArgs e) 
f 
| 
MessageBox.Show((e.OriginalSource as FrameworkElement). Name); 


| 


xx HUS — dE EE: 因为 路 由 事件 〈 的 消息 ) 是 从 内 部 一 层 一 层 
传递 出 来 最 后 到 达 最 外 层 的 gridRoot， 并 且 由 gridRoot 元 系 将 事件 消 因 交 
给 ButtonClicked 方 法 来 处 理 ， 所 以 传 入 ButtonClicked 方 法 的 参数 sender 
实际 上 是 gridRoot 而 不 是 被 单 击 的 Button， 这 与 传统 的 直接 事件 不 太一 
样 。 如 果 想 查看 事件 的 源 涉 《最初 发 起 者 ) 怎么 办 呢 ? TEX H 


e.OriginalSource， 使 用 它 的 时 候 需 要 使 用 asyis 操 作 符 或 者 强制 关 型 转换 
je Wn] / 转换 为 正确 的 类 型 。 
运行 程序 并 单 击 右边 的 按钮 ， 运 行 效果 如 图 8-7 所 示 。 


而 Routed — (el 3€ J 


buttonRight 





图 8-7 运行 效果 


上 述 为 元 系 添 加 路 由 事件 处 理 器 的 事情 在 XAML 里 也 可 以 完成 ， 只 
需要 把 XAML 代 码 改 成 这 样 即 可 : 


«Grid x:Name="gridRoot" Background-" Lime" Button,Click=" ButtonClicked" > 
cl-- 原 有 内 容 -> 
</Grd> 


HIRE XAMLZmIE SIT] EIL En Je] J 25 Jú £A VS HE H EF 
处 理 器 支持 的 并 不 完美 ， 所 以 当 你 写 出 Button. 时 并 不 会 得 到 什么 提示 ， 
这 时 候 你 必须 “勇敢 地 写 下 去 ”， 直 到 你 敲 出 “=” 时 它 才 会 给 出 提示 
问 你 是 创建 一 个 新 的 事件 处 理 器 还 是 使 用 已 有 的 、 能 与 此 事件 匹配 的 事 
件 处 理 器 (如 图 8-8 所 示 )。 


«Grid x Name-"gridRoot" Background= Lime" Button Click=""> 





aP <New Event Handlers — 
a ButtonClicked 





图 8-8” 目 动 提示 功能 


不 过 ， 如 果 你 使 用 的 是 ButtonBase 而 不 是 Button， 束 能 获得 XAML 
Zk as lJ F SJ axt CHHEJ8-9F1T2S2) 。 


«Grid xName="gridRoot" Background-"Lime" ButtonBase b 


m) 





图 8-9 ” 目 动 提示 功能 


道理 很 简单 ， 因 为 ClickEvent 这 个 路 由 事件 是 ButtonBase 关 的 静态 成 
员 变 量 (Button 关 是 通过 继承 获得 它 的 ) ， 而 XAML 编 辑 器 只 认得 包含 
ClickEvent 字 段 定 义 的 类 。 


83.2 HJE X EE EH SR TIE 


JJ Y DEET FS] 8 2 I8] PER Ei s m z dk dl] H Cx SY EST EH SE 
件 ， 说 实话 ， 在 程序 中 使 用 这 种 能 够 在 对 象 间 “ 改 来 发 去 ”的 事件 、 不 再 
受 直 接 事 件 《〈 那 种 必须 手动 把 事件 一 层 一 层 癌 外 传 ) 的 束缚 的 感觉 真 的 
IREE! 那么 ， 我 们 如 何 才 能 定义 目 己 的 路 由 事件 呢 ? 本 节 束 来 详细 讨论 
这 个 问题 。 
创建 自 定 义 路 由 事件 大 体 可 以 分 为 三 个 步 桑 : 
(1) 声明 并 注册 路 由 事件 。 
(20 ZEE H SEE VS JHCLRAE FE e 
(3) 创建 可 以 激发 路 由 事件 的 方法 。 
下 面 以 从 ButtonBase 类 中 抽取 出 的 代码 为 例 来 展示 这 3 个 步骤 。 为 了 
避免 生 玩 代码 对 学 习 的 干扰 ， 此 处 对 代码 做 了 些 人 简化 : 


public abstract class ButtonBase : ContentControl, ICommandSource 
| 
省 声明 并 注册 路 由 事件 
public static readonly RoutedEvent ClickEvent = * 注 册 路 由 事件 #/: 


1/ 为 路 由 事件 添加 CLR 事件 包装 器 

public event RoutedEventHandler Click 

| 
add | this. AddHandler(ClickEvent, value); ! 
remove | this. RemoveHandler(ClickEvent, value); | 


激发 路 由 事件 的 方法 ， 此 方法 在 用 户 单 击 鼠 标 时 会 被 Windows 系统 调用 
protected virtual void OnClick() 
| 

RoutedEventArgs newEvent = new RoutedEventAres(ButtonBase.ClickEvent, this); 


this. RaiseEvent(newEvent); 


| 
1 


定义 路 由 事件 与 定义 依赖 属性 的 手法 极为 相似 一 一 为 你 的 类 声明 一 
个 由 public ^ static readonly 修 饰 的 RoutedEvent 类 型 字段 ， 然 后 使 用 
EventManager 类 的 RegisterRoutedEvent 方 法 进行 注册 。 可 惜 的 是 Visual 
Studio 200878 P3 HH TEES EH SEE HAN Fr Br. (snippet〉， 所 以 这 一 过 
Fei NR. HEAD] EA EH RS UBTERBI ES H ERA T Ir, 
大 家 可 以 自己 下 载 并 添加 。 

为 路 由 事件 洪 加 CLR 事 件 包装 是 为 了 把 路 由 事件 骏 圳 得 像 一 个 传统 
的 直接 事件 ， 如 果 不 关 注 压 层 实现 ， 程 序 员 不 会 感觉 到 它 与 传统 直接 种 
件 的 区 别 ， 仍 然 可 以 使 用 操作 符 (+=) 为 事件 添加 处 理 絮 和 使 用 操作 符 

(-=) 移 除 不 绸 使 用 的 事件 处 理 需 。 为 路 由 事件 这 加 CLR 事 件 包办 的 代 
人 码 与 使 用 CLR 属 性 包装 依赖 属性 的 代码 格式 亦 非 党 相近 ， 只 是 天 人 键 字 get 
和 set 航 蔡 换 为 add 和 remove。 当 使 用 操作 人 符 《+=) 添加 对 路 由 事件 的 侦 
听 处 理 时 ，add 分 文 的 代码 会 航 调用 ;， 当 使 用 操作 人 符 〈-=) 移 除 对 此 事 





件 的 侦 听 处 理 时 ，remove 分 文 的 代码 会 要 调用 一 CLR 事 件 只 是 “看 上 
去 像 ” 一 个 直接 事件 ， 本 质 上 不 过 是 在 当前 元 际 〈 路 由 的 第 一 站 ) 上 调 
用 AddHandler 和 RemoveHandler 而 已 。 另 外 ，XAML 编 辑 器 也 是 靠 这 个 
CLR3ETE BIA S807 E EE SI TEZR - 
BUSES HFFR MHE, TE 2G) ra VESTE WJ YH e 
(RoutedEventArgs 类 的 实例 ) 并 把 它 与 路 由 事件 关联 ， 然 后 调用 元 素 的 
RaiseEvent 方 法 (继承 自 UIElement 类 ) 把 事件 发 送出 去 。 注 意 ， 这 与 激 
发 传统 直接 事件 的 方法 不 同 ， 传 统 直 接 事 件 的 激发 古 明 过 调用 CLR 事 件 
sd 而 路 由 事件 的 激发 与 作为 其 包 闭 需 的 CLR 事 件 坚 
\ 相 十。 
了 解 了 创建 目 定 义 路 由 事件 的 步骤 后 ， 让 我 们 关注 用 于 注册 路 由 事 
件 的 代码 。 完 整 的 注册 代码 如 下 : 


I| 声明 并 注册 路 由 事件 
public static readonly RoutedEvent ClickEvent = EventManager. RegisterRoutedEvent 
("Click", RoutingStrategy.Bubble, typeof( RoutedEventHandler), typeof( ButtonBase)); 


最 重要 的 是 了 解 EventManager.RegisterRoutedEvent 方 法 的 四 个 参 
数 。 

第 一 个 参数 为 string 类 型 ， 被 称 为 路 由 事件 的 名 称 ， 按 微软 的 建 
议 ， 这 个 字符 串 应 该 与 RoutedEvent 变 量 的 前 级 和 CLR 事 件 包 闭 亏 的 名 称 
一 致 。 本 例 中 ， 路 由 事件 变量 名 为 ClickEvent， 则 此 字符 串 为 Click， 
CLR 事 件 的 名 称 亦 为 Click。 因 为 确 层 算法 与 依赖 属性 类 似 ， 需 要 使 用 这 
LR P NON MM Code， 上 所 以 这 个 字符 串 不 能 

第 二 个 参数 称 为 路 由 事件 的 案 略 。WPF 路 由 事件 有 3 种 路 由 染 略 : 

e Bubble, HigsX: 跤 由 事件 由 事件 的 激发 者 出 发 同 它 的 上 级 容 
侠 一 层 一 层 路 由 ， 有 直至 最 外 层 容 硕 (Window 或 者 Page) 。 因 为 是 由 树 
的 底 妆 回 顶 端 移动 ， 而 且 从 事件 激发 元 际 到 UI 树 的 树 根 只 有 确定 的 一 条 
路 径 ， 所 以 这 种 脓 略 被 形象 地 命名 为 “ 冒 泡 式 ”。 

e Tunnel, PEIN: 事件 的 路 由 方 同 正好 与 Bubble 策 略 相 反 ， 是 
由 UI 树 的 树 根 回 事 件 激 及 控件 移动 。 因 为 从 UI 树 根 癌 树 搬移 动 时 有 很 多 
路 径 ， 但 我 们 和 希望 是 由 树 根 问 激 发 事件 的 控件 移动 ， 这 束 好 像 在 树 根 与 
目标 控件 之 间 控 掘 了 一 条 隧 道 ， 事 件 只 能 沿 痢 降 道 移动 ， 所 以 称 之 
为 “隧道 式 ”。 

e Direct, HAN: 模仿 CLR 十 接 事 件 ， 十 接 将 事件 消息 送 达 事 件 
Jl; 
第 三 个 参数 用 于 指定 事件 处 理 右 的 类 型 。 事 件 处 理 右 的 返回 值 类 型 


pe 不 然 会 导致 在 编译 时 抛 
BS. 
第 四 个 参数 用 于 指明 路 由 事件 的 宿主 〈 拥 有 者 ) 是 哪个 类 型 。 与 依 
赖 属性 关 似 ， 这 个 类 型 和 第 一 个 参数 共同 参与 一 些 底 层 算法 且 产 后 这 个 
路 由 事件 的 Hash Code 并 被 注册 到 程序 的 路 由 事件 列表 中 。 

下 面 我 们 目 己 动手 创建 一 个 路 由 事件 ， 这 个 事件 的 用 途 是 报告 事件 
发 生 的 时 间 。 

所 谓 “ 兵 马 未 动 ， 粮 时 先行 盖 为 了 让 事件 消息 能 携 市 按钮 家 单 击 
时 的 时 间 ， 我 们 创建 了 一 个 RoutedEventArgs 类 的 派生 类 ， 并 为 其 添加 
ClickTime 属 性 : 


l 用 于 承载 时 间 消 县 的 事件 参数 
class ReportTimeEventÁrgs : RoutedEventArgs 


Í 
l 


public ReportTimeEventArgs(RoutedEvent routedEvent, object source) 
: base(routedEvent, source)!! 
public DateTime ClickTime | get; set; } 


i 
| 


然后 ， 骨 创建 一 个 Button 类 的 派生 类 并 按 前 述 步 又 为 其 洪 加 路 由 事 
(dn 


class TimeButton : Button 


| 
声明 和 注册 路 由 事件 
public static readonly RoutedEvent Report TimeEvent = EventManager.RegisterRoutedEvent 
(" Report Time", RoutingStrategy.Bubble, typeof( EventHandler«Report TimeEventArgs?), typeof( TimeButton)); 


I| CLR 事件 包装 器 
public event RoutedEventHandler ReportTime 


i 
add | this.AddHandler(ReportTimeEvent, value); } 


remove { this.RemoveHandler( Report TimeEvent, value); } 


I| 激发 路 由 事件 ， 借 用 Click 事件 的 激发 方法 
protected override void OnClick() 
| 
base.OnClick(); — // 保证 Button 原 有 功能 正常 使 用 、Click 事件 能 被 激发 


ReportTimeEventArgs args = new ReportTimeEventArgs(ReportTimeEvent, this); 


args.ClickTime = DateTime.Now; 
this. RaiseEvent(args); 


FIBZEREHPBJEBIXAMLTVG: 


«Window x:Class-"WpfApplication TimeButton. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:localz "clr-namespace: WpfApplicationTimeButton" Titlez" Routed Event" 
x:Name-" window 1" Height-"300" Width" 300" 
local: TimeButton.ReportTimez " ReportTimeHandler" > 

«Grid x:Name-" gnd 1" local: TimeButton.ReportTimez" ReportTimeHandler " > 
«Grid x:Name-"erid. 2" local: TimeButton.ReportTimez " ReportTimeHandler" > 
«Gnd x:Name-" grid. 3" local: TimeButton.ReportTimez" Report TimeHandler" > 


—" 


«StackPanel x:Name="stackPanel 1" 
local: TimeButton.Report Timez" ReportTimeHandler" > 
«ListBox x:Name="listBox" /> 
<local:TimeButton x:Name="timeButton" Width="80" Height="80" 
Content=" 报 时 "local:TimeButton,.ReportTime="ReportTimeHandler" /> 
</StackPanel> 
<JGrid> 
<JGrid> 
</Grid> 


«Window? 


在 UI 界面 上 ， 以 Window 为 根 ， 套 了 三 层 Grid 和 一 层 StackPanel ( 
们 都 设 定 了 x:Name) ， 最 里 面 的 StackPanel 中 放置 了 一 个 ListBox 和 一 个 
TimeButton 《上 面 刚刚 创建 的 Button 派 生 类 ) 。 注 意 : 从 最 内 层 的 
TimeButton 到 最 外 层 的 Window 都 侦 听 着 TimeButton.ReportTimeEvent 这 
个 路 由 事件 ， 并 用 ReportTimeHandler 方 法 来 啊 应 这 个 事件 。 
ReportTimeHandlerH £83 4H P : 


|! ReportTimeEvent 路 由 事件 处 理 器 
private void Report TimeHandler(object sender, ReportTimeEventArgs e) 


| 


FrameworkElement element = sender as FrameworkElement; 

string timeStr = e.ClickTime.ToLongTimeString(); 

string content = string.Format("/0) 3/15. 11]", timeStr, element.Name); 
this.listBox.Items.Add(content ; 


运行 程序 、 单 击 按钮 ， 效 来 如 图 8-10 所 示 。 





| E` Routed Event 





14:11:35 到 达 timeButton 
14:11:35 到 达 stackPanel 1 
14:11:35 到 达 grid 3 
14:11:35 到 达 grid 2 
14:11:35 到 达 grid 1 
14:11:35 到 达 window_1 _ 












































图 8-10 ”运行 效果 
注意 
为 我 们 为 TimeButton 注 册 ReportTimeEvent 时 使 用 的 是 Bubble 案 略 ， 所 以 事件 是 党 这 样 的 
跤 人 径 由 内 同 外 传递 的 : TimeButton > StackPanel > Grid > Grid > Grid > Window. 


如 果 我 们 把 TimeReportEvent 的 策略 改 为 Tunnel: 
省 声明 和 注册 路 由 事件 
public static readonly RoutedEvent ReportTimeEvent = EventManager.RegisterRoutedEvent 
("ReportTime", RoutingStrategy. Tunnel, typeof( EventHandlercReportTimeEventArgs?), typeof( TimeButton)); 


单 击 按钮 后 ， 效 末 是 如 图 8-11 所 示 。 


m ' Routed Event 


14:17:25 到 达 window 1 
14:17:25 到 达 grid 1 
14:17:25 到 达 grid_2 
14:17:25 到 达 grid_3 
14:17:25 到 达 stackPanel 1 
14:17:25 到 达 timeButton 



































图 8-11 运行 效果 

正好 与 Bubble 策 略 相 反 ，Tunnel 策 略 使 事件 沿 着 从 外 同 内 的 路 径 传 
iB: Window 5 Grid 2 Grid > Grid 2 StackPanel 5 TimeButton. 

说 到 这 里 ， 不 禁 想 起 一 句 名 言 : Bucket stop here, xz yk ji SE p ib 
到 自己 手 里 就 不 要 再 继续 往 下 传 了 。 那 么 ， 如 何 让 一 个 路 由 事件 bucket 
stop here 呢 ? 换 句 话说 ， 如 何 让 一 个 路 由 事件 在 菜 个 结 点 处 不 再 继续 传 
J]? 办 法 非常 人 简 单 : 路 由 事件 携 市 的 事件 参数 必须 是 RoutedEventArgs 
类 或 其 派生 类 的 实例 ，RoutedEventArgs 类 具有 一 个 bool 类 型 属性 
Handled， 一 旦 这 个 属性 被 设置 为 tue， 就 表示 路 由 事件 “已 经 被 处 理 * 了 

(Handle 有 “处 理 *”、“ 搞 定 ” 的 意思 ) ， 那 么 路 由 事件 也 就 不 必 再 往 下 传 

递 了 了 了。 如 果 把 上 面 的 ReportTimeEvent 处 理 需 修改 为 这 样 : 


|! ReportTimeEvent 路 由 事件 处 理 器 
private void Report TimeHandler(object sender, Report imeEventArsgs e) 
| 
FrameworkElement element = sender as FrameworkElement; 
string timeStr = e.Click Time. ToLong TimeString(); 
string content = string.Format(" {0} 到 达 (1]", timeStr, element.Name); 
this.listBox.Items.Add(content); 


if (element == this.grid 2) 
| 
e.Handled = true; 


j 


运行 程序 、 单 击 按钮 后 ， 效 果 如 网 8-12 所 示 【分别 为 Bubble 策 略 和 
Tunnel 策 略 ) : 


| 16:22:56 到 达 timeButton 16:20:16 到 达 window 1 
16:22:56 到 达 stackPanel 1 | |16:20:16 到 达 grid 1 
16:20:16 到 达 grid_2 














图 8-12 ”运行 效果 
显然 ， 因 为 e.Handled 被 设置 为 true， 无 论 是 Bubble 策 略 还 是 Tunnel 
宋 略 ， 路 由 事件 在 经 过 grid_2 后 就 被 处理 了 、 不 再 同 下 传 谴 。 


注意 

让 我 们 稍 作 总 结 。 路 由 事件 将 程序 中 的 组 件 进一步 解 耕 《〈 比 用 直接 事件 传递 消息 还 要 松 
HO ， 使 程序 员 可 以 更 自由 地 编写 代码 、 实 现 设 计 。 这 里 有 两 点 经 验 与 大 家 分 享 : 

e 很 多 类 的 事件 都 是 路 由 事件 ， 如 TextBox 类 的 TextChanged 事 件 、Binding 类 赃 
SourceUpdated 事 件 等 ， 所 以 在 用 到 这 些 类 型 的 时 候 不 要 墨 守 传 统 .NET 编 程 带 来 的 习惯 ， 要 发 挥 
目 己 的 想象 力 ， 让 程序 结构 更 加 合理 、 代 人 码 更 加 简洁 。 

e 路 由 事件 虽 好 ， 但 也 不 要 滥用 ， 举 个 例子 ， 如 果 让 所 有 Button 〈 包 括 组 件 里 的 
Button) 的 Click 事 件 都 传递 到 最 外 层 窗 体 ， 让 窗 体 捕捉 并 处 理 它 ， 那 么 程序 架构 束 变 得 坚 无 意 
义 了 。 正 确 的 办 法 是 ， 事 件 该 由 谁 来 捕捉 处 理 ， 传 到 这 个 地 方 时 就 应 该 处 理 挥 。 














8.3.3 RoutedEventArgsH]SourceS OriginalSource 


有 前面 已 经 提 人 a 到， 路 由 事件 是 疝 看 VisualTree 传 递 有 的 。VisualTree 与 
LogicalTree 的 区 别 就 在 于 : LogicalTree 的 叶子 结 点 是 构成 用 户 界面 的 控 
件 ， 而 VisualTree 要 连 控件 中 的 细微 结构 也 算 上 。 

我 们 说 “路 由 事件 在 VisualTree 上 传递 "， 本 音 上 是 襄 “ 路 由 事件 的 消 
轧 在 VisualTree 上 传递 ”， 而 路 由 事件 的 消息 则 包含 在 RoutedEventArgs 实 
例 中 。RoutedEventArgs 有 两 个 属性 Source 和 OriginalSource， 这 两 个 属性 
都 表示 路 由 事件 传递 的 起 点 《〈 即 事件 消 恩 的 产 凑 ) ， 只 不 过 Source 表 未 
的 是 LogicalTree 上 的 消息 源头 ， 而 OriginalSource 则 表示 VisualTree 上 的 
源头 。 请 看 下 面 的 例子 。 

首先 创建 了 一 个 UserControl，XAML 代 人 码 如 下 (没有 C# 远 辑 代 
13) : 


<UserControl x:Class-"ItemsPanelSample.MyUserControl" 
xmlns-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
«Border BorderBrush-" Orange" BorderThickness-"3" ComerRadius-" 57 
«Button x:Namez"innerButton" Widthz"80" Heightz "80" Content= OK /> 
«(Border 


«IUserControl? 


这 个 UserControl 的 类 名 为 MyUserControl， 其 中 包含 一 个 名 为 
innerButton 的 Button。 然 后 把 这 个 UserControl 过 加 到 主 窗 体 中 : 


<Window x:Class-"ItemsPanelSample.Main Window" 

xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x= http:/schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-" cIr-namespace: SourceÁndOriginalSourceSample " 
Title" Source v.s, OriginalSource" 
Height-" 180" Width-"300" WindowStyle-"ToolWindow"? 

«Gnd» 
«local: MyUserControl x: Namez"myUserControl" Marginz" 10" /» 

</Grid> 


</Window> 
最 后 在 后 人 台 代 码 中 为 主 窗 体 添 加 对 Button.Click 路 由 事件 的 侦 上 听 : 


public partial class MainWindow : Window 
| 
| 


public MainWindow() 
| 


InitializeComponent(); 


/ 为 主 窗 体 添 加 对 Button Click 事件 的 侦 听 
this.AddHandler(Button.ClickEvent, new RoutedEventHandler(this.Button Click)); 


I| BEREIT RE dS 
private void Button. Click(object sender, RoutedEventArgs e) 


| 
string strOriginalSource = string.Format(" Visual Tree start point: {0}, type is 111". 
(e.OriginalSource as FrameworkElement). Name, e.OriginalSource.GetType(). Name); 


string strSource = string.Format(" LogicalTree start point: (07, type is 11] ". 
(e. Source as FrameworkElement).Name, e.Source.Get Type(). Name); 


MessageBox.Show(strOriginalSource + "rin" + strSource); 


运行 程序 、 单 击 按钮 ， 效 来 如 图 8-13 所 示 。 


VisualTree start point: innerButton, type is Button 
Logical ree start point; myUserLontrol, type is MyUserControl 








图 8-13 ”运行 效果 


Button.Cjlick 路 由 事件 是 从 MyUserControl 的 innerButton 发 出 来 的 ， 
在 主 寡 体 中 ，myUserControl] 是 LogicalTree 的 末端 结 点 ， 所 以 e.Source 就 
是 myUserControl; 而 窗 体 的 VisualTree 则 包含 了 myUserControl 的 内 部 结 
构 ， 可 以 “看 见 ? 路 由 事件 完 竟 是 从 哪个 控件 有 出 来 的 ， 所 以 使 用 


e.OriginalSource 可 以 获得 innerButton 。 
8.3.4 ”事件 也 附加 一 一 深入 小 出 附加 事件 


在 WPF 事 件 系统 中 还 有 一 种 事件 科 称 为 附加 事件 《〈Attached 
Event) ， 它 束 是 路 由 事件 。“ 那 为 什么 还 要 起 个 狐 名 字 呢 ?” 你 可 能 会 
jE 

“AKAN KE, DARE ROB", AER EEE 
KER., BARRE? 让 我 们 看 看 都 有 哪些 类 拥有 附加 事件 : 

e Binding 类 : SourceUpdated 事 件 、TargetUpdated 事 件 。 

e Mouse 类 : MouseEnter 事 件 、MouseLeave 事 件 、MouseDown 事 
件 、MouseUp 事 件 等 。 

e Keyboard 类 : KeyDown 事 件 、KeyUp 事 件 等 。 

再 对 比 一 下 那些 拥有 路 由 事件 的 类， 如 Button、Slider、 
TextBox...…... 发 现 什 么 问题 了 吗 ? 原来 ， 足 由 事件 的 答 主 都 是 些 拥有 有 可 
视 化 实体 的 界面 元 素 ， 而 附加 事件 则 不 有 具备 显示 在 用 户 寞 面 上 的 能 力 。 
也 束 是 说 ， 附 加 事件 的 特 主 没有 寞 面 泻 染 功能 这 双 “ 改 并 ?， 但 一 样 可 以 
使 用 附加 事件 这 个 “元 犀 ? 与 其 他 对 象 进行 沟通 。 

理解 了 附加 事件 的 原理 ， 让 我 们 动手 写 一 个 例子 。 我 想 实 现 的 逻辑 


是 这 样 的 : 设计 一 个 名 为 Student 的 类 ， 如 果 Student 实 例 的 Name 属 性 值 
发 生 了 变化 束 沿 友 一 个 路 由 事件 ， 我 会 使 用 界面 元 系 来 捕捉 这 个 事件 。 
这 个 类 的 代码 如 下 : 


public class Student 
I 
中 声明 并 定义 路 由 事件 


public static readonly RoutedEvent NameChangedEvent = EventManager. RegisterRoutedEvent 
("NameChanged", RoutingStrategy.Bubble, typeof( RoutedEventHandler), typeof(Student)); 


public int ld | get; set; | 
public string Name | get; set; j 


设计 一 个 简单 的 界面 : 

«Window x:Class-"WpfApplication] Window 1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winf/2006/xaml" Title=" Attached Event" 
Height-"200" Width-"200"» 

«Grid x:Name="gridMain"> 
«Button x: Name-"button]" Content-"OK" Width-"80" Height-"80" 
Click-"Button. Click" /> 
</Grid> 
«Window? 


其 后 台 代 人 码 如 下 : 


public partial class Window] : Window 
| 


1 
public Windowll) 
| 
InitializeComponent(); 
I| 为 外 层 Grid 添加 路 由 事件 侦 听 器 
this.gridMain.AddHandler( 
Student. NameChangedE vent, 
new RoutedEventHandler(this.StudentNameChangedHandler)); 
| 
I| Click 事件 处 理 器 
private void Button Click(object sender, RoutedEventArgs ë) 
| 
Student stu = new Student() { Id = 101, Name = "Tim" }; 
stu. Name = "Tom"; 
| ERFARER AREE 
RoutedEventArgs arg = new RoutedEventArgs(Student.NameChangedEvent, stu); 
this. button 1.RaiseEvent(arg); 
Il Grid 捕捉 到 NameChangedEvent 后 的 处 理 器 
private void StudentNameChangedHandler(object sender, RoutedEventArgs e) 
| 
MessageBox.Show((e.OriginalSource as Student).Id. ToString()); 
| 
| 


后 从 代码 中 ， 当 界面 上 唯一 的 Button 被 单 击 后 会 触发 Button_Click 这 
个 方法 。 有 一 点 必须 注意 的 是 : 因为 Student 不 是 UIElement 的 派生 类 ， 
所 以 它 不 具有 RaiseEvent 这 个 方法 ， 为 了 友 送 路 由 事件 束 不 得 不 “ 借 
用 ”一 下 Button 的 RaiseEvent 方 法 了 。 在 窗 体 的 构造 右 中 为 Grid 元 际 还 加 
了 对 Student.NameChangedEvent 的 侦 听 ， 这 与 添加 对 路 由 事件 的 侦 听 设 
I > GridfE di SE SIRE EH SE Je Z SZ SHEER JR. C— "Student 
实例 ) 的 Id。 


运行 程序 并 单 击 按钮 ， 效 果 如 图 8-14 所 示 。 
| E Attached E. = | % _ | 

















图 8-14 ”运行 效果 


理论 上 现在 的 Student 类 已 经 算是 具有 一 个 附加 事件 了 ， 但 微软 的 官 
J X RÀ Z^] ke ENIA Bf SEES UL — 4 CLR £228: UA f X AML Zi 88:8 4 331] 
并 进行 智能 提示 。 可 惜 的 是 ，Student 类 并 非 派 生 自 UIElement， 因 此 亦 
不 具备 AddHandler 和 RemoveHandler 这 两 个 方法 ， 所 以 不 能 使 用 CLR 属 
性 作为 包装 右 ( 因 为 CLR 属 性 包装 右 的 add 和 remove 分 支 分 别 调 用 当前 
对 象 鸭 AddHandler 和 RemoveHandler) 。 人 微软 规定 : 

e J HEUIR Au PE JUSTE fpi UT s E) E2RE S e — T 4A 73 
Add*Handlerffjpublic ”static 方 法 ， 星 号 代表 事件 名 称 ( 与 注册 事件 时 的 
名 称 一 致 ; 。 此 方法 接收 两 个 参数 ， 第 一 个 参数 是 事件 的 侦 听 者 〈 类 型 
为 DependencyObject) ， 和 第 二 个 参数 为 事件 的 处 理 喜 

(RoutedEventHandler 委 托 类 型 ) , 

e 解除 UI 元 隶 对 附加 事件 侦 听 的 包 痛 亏 是 名 为 Remove*xHandler 的 
public static 方 读 ， 星 亏 亦 为 事件 名 称 ， 参 数 与 Add*Handler 一 致 。 

按照 规范 ，Student 类 被 升级 为 这 样 : 


public class Student 


I| 声明 并 定义 路 由 事件 


public static readonly RoutedEvent NameChangedEvent = EventManager.RegisterRoutedE vent 
("NameChanged", RoutingStrategy. Bubble, typeof( RoutedEventHandler), typeof(Student)); 


I| ART UR BL CUT 
public static void AddNameChangedHandler( DependencyObject d, RoutedEventHandler h) 


| 
UlElement e = d as UIElement; 
if (e != null) 
| 
e. AddHandler(Student. NameChangedE vent, h); 
| 
| 


[| 移 除 侦 听 
public static void RemoveNameChangedHandler( DependencyObject d, RoutedEventHandler h) 


| 
UlElement e = d as UIElement; 
if (e != null) 
| 
e, RemoveHandler(Student.NameChangedEvent, h); 
| 
| 


public int Id [ get; set; } 
public string Name { get; set; } 


l JR ERG tE a e W iH AHS J XS (ABS JII E DL Ur — MË i 3 EX 
动 ) : 


public Window]() 
InitializeComponent( ); 


I| 为 外 层 Grid 添加 路 由 事件 侦 听 器 

Student. AddNameChangedHandler( 

this.gridMain, 

new RoutedEventHandler(this.StudentNameChangedHandler)); 


现在 让 我 们 仔细 理解 一 下 附加 事件 的 “附加 *。 确 切 地 说 ， 
UIElement 类 是 跤 由 事件 答 主 与 附加 事件 答 主 的 分 水 岭 ， 不 单 是 因为 从 
UIElement 关 开始 才 其 备 了 在 界面 上 显示 的 能 力 ， 还 因为 RaiseEvent、 
AddHandler 和 RemoveHandler 这 些 方法 也 定义 在 UIElement 类 中 。 因 此 ， 
如 果 在 一 个 韭 UIElement 派 生 类 中 注册 了 路 由 事件 ， 则 这 个 类 的 实例 既 
不 能 目 己 激发 (Raise) 此 路 由 事件 也 无 法 目 己 侦 听 此 路 由 事件 ， 只 能 
把 这 个 事件 的 激发 “ 附 看 ”在 茶 个 具有 RaiseEvent 方 法 的 对 象 上 ， 借 助 这 
个 对 象 的 RaiseEvent 方 法 把 事件 发 送出 去 ;事件 的 侦 听 任务 也 只 能 交 给 
别 的 对 象 去 做 。 总 之 ， 附 加 事件 只 能 算是 路 由 事件 的 一 种 用 法 而 非 一 个 
狐 概 仿 ， 说 不 定 哪 天 微软 就 把 附加 事件 这 个 概念 撤消 了 了 。 
注意 

最 后 分 享 些 实际 工作 中 的 经 验 : 

第 一 ， 像 Button.Click 这 些 路 由 事件 ， 因 为 事件 的 宿主 是 界面 元 素 、 本 吴 就 是 UI 树 上 是 一 
个 结 点 ， 所 以 路 由 事件 路 由 时 的 第 一 站 就 是 事件 的 没 发 者 。 附 加 事件 和 窒 主 不 是 UIElement 的 派生 
类 ， 所 以 不 能 出 现在 UI 树 上 的 结 点 ， 而 且 附 加 事件 的 沿 友 是 借助 UI 元 素 实 现 的 ， 因 此 ， 而 附加 
事件 路 由 的 第 一 站 是 激 友 它 的 元 际 。 

第 二 ， 实 际 上 很 少 会 把 附加 事件 定义 在 Student 这 种 与 业务 逻辑 相关 的 类 中 ， 一 般 都 是 定 
义 在 像 Binding、Mouse、Keyboard 这 种 全 局 的 Helper 类 中 。 如 果 需 要 业务 逻辑 类 的 对 象 能 发 送 
出 路 由 事件 来 怎么 办 ? 我 们 不 是 有 Binding 吗 ! 如 采 程 序 架 构 设 计 的 好 《使 用 数据 驱动 UID) ， 那 
么 业务 逻辑 一 定 会 使 用 Binding 对 象 与 UI 元 素 头 联 ， 一 旦 与 业务 逻辑 相关 的 对 象 实现 了 
INotifyPropertyChanged 接 口 并 且 Binding 对 象 的 NotifyOnSourceUpdated 属 性 设 为 tue， 则 Binding 
天 会 激 友 其 SourceUpdated 附 加 事件 ， 此 事件 会 在 UI 元 系 树 上 路 由 并 被 侦 听 者 捕获 。 























9 
深入 浅 出 话 命令 


按理 说 ， 这 和 草 让 《三 国 省 义 》 中 的 诸 双 腕 来 讲 是 最 合适 不 过 了 。 为 
FAR? 因为 孔明 先生 妙计 多 多 嘛 ! 你 没 看 见 他 左 一 个 锦 吉 、 右 一 个 锦 
E x BI ZH ? 

inde HIS U F AA eb vp! mAIRE”, Wh iU 
容 ”《〈 比 如 《Chibi-Campaign Guide》、 (How To Borrow Arrows with 
Thatched Boats-A Step By Step Manual》) ， 忌 之， 你 按照 谋划 上 的 征 
略 一 步 一 步 执行 驶 是 了 。 我 悦 然 大 悟 :“ 哦 ， 这 饥 宫 妙计 的 本 质 不 殉 是 
命令 吗 ! ” 真 的 不 得 不 佩服 孔明 先生 的 管理 才能 ， 连 听 起 来 威严 生硬 
的 “命令 ?也 被 他 包装 的 如 此 漂亮 。WPF 也 为 我 们 准备 了 完善 的 命令 
(Command) 系统 ， 所 以 每 个 WPF 程 序 员 都 有 机 会 过 一 把 作 诸 易 觉 的 


你 可 能 会 问 :“ 有 了 路 由 事件 为 什么 还 需要 命令 系统 呢 ? ”事件 的 作 
用 是 发 布 、 传 播 一 些 消息 ， 消 息 送 达 接 收 者 ， 事 件 的 使 全 也 就 完成 了 ， 
至 于 如 何 啊 应 事件 送 来 的 消 恩 事件 并 不 做 规定 ， 每 个 接收 者 可 以 使 用 目 
己 的 行为 来 啊 应 事件 。 也 就 是 说 ， 事 件 不 具有 约束 力 。 命 令 与 事件 的 区 
别 束 在 于 命令 是 具有 约束 力 的 战场 上 ， 将 盏 一 声 令 下 :“ 前 进 ! ”无 
论 是 步兵 还 是 装甲 兵 都 会 执行 同一 个 行为 MoveForward()〔 而 这 个 方法 
很 可 能 定义 在 BattleUnitBase 这 个 步兵 和 装甲 兵 共 同 的 基 类 里 ) ; 同样 当 


你 在 Visual Studio 菜 单 栏 上 单 击 图 标 或 按 下 Ctrl 十 Shift 十 S 时 ， 所 有 
打开 的 文档 窗口 都 会 执行 Save() 方 法 


不 能 执行 统一 的 行为 ， 还 能 

“命令 ” 吗 ? 

的 确 ， 实 际 编程 工作 中 束 算 只 使 用 事件 、 不 使 用 命令 ， 程 序 的 地 辑 
也 一 样 可 以 被 驱动 得 很 好 ， 但 我 们 不 能 阻止 程序 员 按 上 自己 的 习惯 去 编写 
代码 。 比 如 保存 事件 的 处 理 器 ， 程 序 员 们 可 以 写 Save0)、 
SaveHandler0、SaveDocument0..…….. 这 些 都 符合 代码 规范 ， 但 迟早 有 一 
天 整个 项 目 会 变 得 无 法 被 谈 居 ， 新 来 的 程序 员 或 修改 bug 的 程序 员 会 很 
抓 狂 。 如 果 使 用 命令 ， 情 况 会 好 很 多 一 一 当 Save 命 令 到 达 某 个 组 件 时 ， 
命令 会 主动 去 调用 组 件 的 Save0 方 法 ， 而 这 个 方法 可 能 被 定义 在 基 类 或 
者 接口 里 《 即 保证 了 这 个 方法 一 定 是 存在 的 ) ， 这 吏 在 代码 结构 和 命名 











上 做 了 约束 。 不 但 如 此 ， 命 令 还 可 控制 接收 者 “ 先 做 校 验 、 再 保存 、 然 
后 关闭 ”， 也 就 是 说 ， 命 令 除 了 可 以 约束 代码 ， 还 可 以 约束 步骤 逻辑 ， 
这 让 新 来 的 程序 员 想 犯错 都 难 ， 也 让 修改 bug 的 程序 员 很 快 能 找到 规 
律 、 容 易 上 手 。 

既然 命令 能 帮助 我 们 降低 成 本 ， 何 乐 而 不 为 呢 ? 本 章 束 让 我 们 一 同 
来 学 习 如 何 使 用 WPF 命 令 系 统 。 


91 命令 系统 的 基本 元 系 与 天 系 
9.1.1 命令 系统 的 基本 元 素 


WPF 的 命令 系统 由 几 个 基本 要 系 构成 ， 它 们 是 : 

e (ij (Command) : WPF 的 命令 实际 上 就 古 实现 了 1ICommand 
接口 的 类 ， 平 时 使 用 最 多 的 是 RoutedCommand 类 。 我 们 还 会 学 习 使 用 自 

e 命令 产 (Command Source) : 即 命令 的 发 送 者 ， 是 实现 了 
ICommandSource 接 口 的 类 。 人 很 多 界面 元 系 都 实现 了 这 个 接口 ， 其 中 包 
括 Button、Menultem、ListBoxItem 等 。 

e 命令 目标 (Command Target) : 即 命令 将 发 送 给 谁 ， 或 者 说 命 
令 将 作用 在 谁 号 上。 命令 目标 必须 是 实现 了 IInputElement 接 口 的 类 。 

e 命令 关联 (Command Binding) : 负责 把 一 些 外 围 远 辑 与 命令 
关联 起 来 ， 比 如 执行 之 前 对 命令 是 否 可 以 执行 进行 判断 、 命 令 执 行 之 后 
还 有 哪些 后 续 工 作 等 。 


9.1.2 EZ 7C Z [a] J < £ 


这 些 基 本 元 系 之 加 的 关系 体现 在 使 用 命令 的 过 程 中 。 命 令 的 使 用 大 
概 分 为 如 下 几 步 : 

(1) 创建 命令 类 : 即 获得 一 个 实现 ICommand 接 口 的 类 ， 如 果 命 令 
与 具体 业务 馆 辑 无 天 则 使 用 WPF 类 库 中 的 RoutedCommand 类 即 可 。 如 果 
想得到 与 业务 逻辑 相关 的 专 有 命令 ， 则 需 创建 RoutedCommand (rk 
ICommand 接 口 ) 的 派生 类 。 

(2) 声明 命令 实例 : 使 用 命令 时 需要 创建 命令 类 的 实例 。 这 里 有 
个 技巧 ， 一 般 情 况 下 程序 中 某 种 操作 只 需要 一 个 命令 实例 与 之 对 应 即 
可 。 比 如 对 应 “保存 ”这 个 操作 ， 你 可 以 拿 同 一 个 实例 去 命令 每 个 组 件 执 
行 其 保存 蕊 能 ， 因 此 程序 中 的 命令 多 使 用 单 件 模式 (Singletone 
Pattern) DAP (ORBE E ZEE. 


(3) 指定 命令 的 源 : 即 指定 由 谁 来 发 送 这 个 命令 。 如 采 把 命令 看 
作 炮 弹 ， 那 么 命令 源 就 相当 于 火炮 。 同 一 个 命令 可 以 有 多 个 产 。 比 如 保 
存 命令 ， 既 可 以 由 来 单 中 的 保存 项 来 发 送 ， 也 可 以 由 工具 栏 中 的 保存 图 
标 来 发 送 。 需 要 注意 的 是 ， 一 旦 把 命令 指派 给 命令 源 ， 那 么 命令 源 束 会 
受命 令 的 影响 ， 当 命令 不 能 被 执行 的 时 候 作 为 命令 源 的 控件 将 处 在 不 可 
用 状态 。 看 来 命令 这 种 炮弹 很 镶 能 ， 当 不 满足 发 射 条 件 时 还 会 给 用 来 发 
碳 它 的 火炮 上 一 道 保 险 、 避 人 免 走 火 。 还 需要 注意 ， 各 种 控件 发 送 命令 的 
方法 不 尽 相 同 ， 比 如 Button 和 MenuItem 是 在 单 击 时 发 送 命令 ， 而 
ListBoxItme 单 击 时 表示 家 选中 所 以 双击 时 才 有 发 送 命令 。 
(4) 指定 命令 目标 : 命令 目标 并 不 是 命令 的 属性 而 是 命令 源 的 属 
性 ， 指 定 命 令 目 标 是 告诉 命令 兰 同 哪个 组 件 发 送 命令 ， 无 论 这 个 组 件 古 
侍 拥 有 焦点 它 都 会 收 到 这 个 命令 。 如 果 没 有 为 命令 源 指 定 命 令 有 目标 ， 则 
ee 
JE TB XE. H ER. 
(5) 设置 命令 关联 : 炮兵 是 不 能 蛙 独 战斗 的 ， 就 像 炮 兵 需 要 侦查 
兵 在 射击 前 观察 敌情 、 判 断 发 射 时 机 ， 在 射击 后 观测 射击 效果 、 和 帮助 修 
正 一样 ，WPF 命 令 需 要 CommandBinding 在 执行 前 来 帮助 判断 是 不 是 可 
以 执行 、 在 执行 后 做 一 些 事 件 来 “打扫 战场 ”。 
在 命令 目标 和 命令 关联 之 则 还 有 一 个 微妙 的 关系 。 无 论 命令 目标 是 
由 程序 员 指 定 还 是 由 WPF 系 统 根 据 焦 点 所 在 地 判断 出 来 的 ， 一 旦 某 个 UI 
组 件 补 命令 源 “ 鹏 上 ”， 命 令 产 束 会 不 堡 地 问 命 令 目 标 “ 投 石 问 路 ”， 命 令 
目标 就 会 不 停 地 发 送出 可 路 由 的 PreviewCanExecute 和 CanExecute[ 加 事 
件 ， 事 件 会 沿 着 UI 元 陛 树 同上 传递 并 航 命 令 天 联 所 捕捉 ， 命 令 关 联 捕捉 
到 这 些 事件 后 会 把 命令 能 不 能 发 送 实时 报告 给 命令 。 类 似 的 ， 如 果 命 令 
被 发 送出 来 并 到 达 命 令 上 日 标 ， 命 令 目 标 束 会 发 送 PreviewExecuted 和 
Executed 两 个 附加 事件 ， 这 两 个 事件 也 会 沿 着 UI 元 系 树 同上 传递 并 被 合 
令 关 联 所 捕捉 ， 命 令 关 联 会 完成 一 些 后 续 的 任务 。 别 小 看 是 “后 续 任 
E 对 于 那些 与 业务 旬 辑 无 基 的 通用 命令 ， 这 些 后续 任 务 才 是 最 重要 
你 可 能 会 问 : “命令 目标 怎么 会 发 出 PreviewCanExecute、 
CanExecute、PreviewExecuted 和 Executed 事 件 呢 ? ”其 实 这 4 个 事件 都 是 
附加 事件 ， 是 被 CommandManager 类 “附加 ”给 命令 目标 的 。 大 家 可 以 翻 
过 头 再 去 理解 一 下 附加 事件 。 另 外 ，PreviewCanExecute 和 CanExecute 的 
执行 时 机 不 由 程序 员 控 制 ， 而 且 执 行 频率 比较 高 ， 这 不 但 会 给 系统 性 能 
偶尔 还 会 引入 几 个 意 想 不 到 的 bug 并 且 比 较 难 调试 ， 务 请 
I IIS 
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捕 提 并 处 理 路 由 事件 ， 
向 命令 反馈 消息 





拥有 
发 送 命令 





图 9-1 关系 图 
913 ”小 试 命令 
说 起 来 很 热 赔 ， 现 在 让 我 们 动手 实践 一 下 。 实 现 这 样 一 个 需求 :， 定 
义 一 个 命令 ， 使 用 Button 来 发 送 这 个 命令 ， 当 命令 送 达 TextBox 时 
TextBox Z f& iHi T (如 果 TextBox 中 没有 文字 则 命令 不 可 被 发 送 ) 。 
程序 的 XAML 界 面 代 码 如 下 : 


«Window x:Class="WpfApplicationl .Windowl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-" Command" 
Background" LightBlue" Height-"175" Width-"260"- 

«StackPanel x:Name-"stackPanel" 
«Button x:Name-"buttonl" Content-"Send Command" Margin-"5" /> 
«TextBox x:Name-"textBoxA" Margin-" 5,0" Height-" 100" /> 
x/StackPanel- 
«Window 
后 台 代 码 为 : 
public partial class Windowl : Window 
| 
public Windowl() 
| 
InitializeComponent(); 
InitializeCommand(); 


J| 声明 并 定义 从 令 
private RoutedCommand clearCmd = new RoutedCommand("Clear", typeof( Windowl)); 


private void InitializeCommand() 
| 
J| 把 命令 赋值 给 命令 源 【 发 送 者 ) 并 指定 快捷 键 
this.buttonl .Command = this.clearCmd: 
this.clearCmd.InputGestures.Add(new KeyGesture(Key.C, Modifierkeys.Alt)); 


/ dig fa H tr 


this.buttonl .CommandTarget = this.textBoxA; 


/ 创建 命令 关联 
CommandBinding cb = new CommandBinding(); 
cb.Command = this.clearCmd; i 只 关注 与 clearCmd 相关 的 事 性 


cb.CanExecute += new CanExecuteRoutedEventHandler(cb CanExecute); 
cb.Executed += new ExecutedRoutedEventHandler(cb Executed); 


I| 把 苗 令 关联 安置 在 外 围 控件 上 
this.stackPanel.CommandBindings. Add(cb); 


l 当 探测 命令 是 否 可 以 执行 时 ， 些 方法 被 调用 
void cb. CanExecute(object sender, CanExecuteRoutedEventArgs e) 
| 

if (string,IsNullQrEmpty(this,textBoxA. Text)) 

| e.CanExecute = false; | 

else 

| e.CanExecute = true; | 


I| 避 鲍 继续 问 上 传 而 降低 程序 性 能 
e.Handled = true; 


| 


[| 当 命令 送 达 目 标 后 ， 此 方法 被 调 用 
void cb. Executed(object sender, ExecutedRoutedEventArgs e) 


| 
this,textBoxA.Clear(): 


I| 避免 继续 各 上 传 而 降低 程序 性 能 


e.Handled = true: 


| 

运行 程序 ， 在 TextBox 中 输入 文字 后 Button 在 命令 可 执行 状态 的 影 
啊 下 变 为 可 用 ， 此 时 单 击 Button 或 者 按 Alt 十 C 键 ，TextBox 都 会 被 清空 ， 
效果 如 图 9-2 所 示 。 


| š Command 


| 8' Command 





CEMAERN, -BIETER 


=} 
= 


图 9-2 ”运行 效果 




















注意 

对 于 上 面 代码 有 几 点 需要 注意 的 地 方 : 

第 一 ， 使 用 命令 可 以 避免 目 己 写 代码 判断 Button 是 否 可 用 以 及 添加 快捷 键 。 

第 二 ，RoutedCommand 是 一 个 与 业务 逻辑 无 天 的 类 ， 只 负 贡 在 程序 中 “跑腿 ”而 并 不 对 命 
今日 标 做 任何 操作 ，TextBox 并 不 是 由 它 清 空 的 。 那 么 对 TextBox 的 清空 操作 是 谁 做 的 呢 ? 和 答案 
古 CommandBinding。 因 为 无 论 是 探测 命令 是 否 执 行 还 是 命令 送 达 目标 ， 都 会 泊 友 命令 目标 发 送 
路 由 事件 ， 这 些 路 由 事件 会 沿 着 UI 元 系 树 同上 传递 并 最 终 补 CommandBinding 所 捕捉 。 本 例 中 
CommandBinding 被 安装 在 外 围 的 StackPanel 上 ，CommandBinding“ 丫 在 高 处 ”起 一 个 侦 听 絮 的 作 
用 ， 而 且 专 门 针 对 cdlearCmd 命 令 捕捉 与 其 相关 的 路 由 事件 。 本 例 中 ， 当 CommandBinding 捕 捉 到 
CanExecute 事 件 丈 会 调用 cb_CanExecute 方 法 〈 判 断 命令 执行 的 条 件 是 否 满足 ， 并 反 蚀 给 命令 供 
其 影响 命令 源 的 状态 ) ; 当 捕 捉 到 的 是 Executed 事 件 〈 表 示 命 令 的 Execute 方 法 已 经 执行 了 ， 或 
说 命令 已 经 作用 在 了 命令 目标 上 ，RoutedCommand 的 Execute 方 法 不 包含 业务 逻辑 、 只 负责 让 命 
令 目 标 激 发 Executed) ， 则 调用 cb_Executed 方 法 。 

第 三 ， 因 为 CanExecute 事 件 的 激发 频率 比较 高 ， 为 了 避免 降低 性 能 ， 在 处 理 完 后 建议 把 
e.Handled 设 为 true。 

第 四 ，CommandBinding 一 定 要 设置 在 命令 目标 的 外 围 控 件 上 ， 不 然 无 法 捕捉 到 
CanExecute 和 Executed 等 路 由 事件 。 


9.1.4 WPF 的 命令 库 
上 面 这 个 例子 中 我 们 自己 声明 定义 了 一 个 命令 : 


private RoutedCommand clearCmd = new RoutedCommand(" Clear", typeof( Window] )); 


命令 具有 “一 处 声明 、 处 处 使 用 ”的 特 操 ， 比 如 Save 命 令 ， 在 程序 的 
任何 地 方 它 部 表示 要 求 命 令 目 标 你 存 数据 。 因 此 ， 人 微软 在 WPF 类 库 里 准 
备 了 一 些 便 捷 的 命令 库 ， 这 些 命 令 库 包括 : 

e ApplicationCommands 

e ComponentCommands 


e NavigationCommands 

e MediaCommands 

e 上 ditingCommands 

它们 都 是 静态 类 ， 而 命令 就 是 用 这 些 类 的 静态 只 读 属 性 以 单 件 模式 
暴露 出 来 的 。 例 如 : ApplicationCommands 类 束 包 含 CancelPrint、 
Close. ContextMenu, Copy. CorrectionList. Cut. Delete, Find. 
Help. New. NotACommand. Open. Paste. Print. PrintPreview. 
Properties, Redo, Replace. Save. SaveAs. SelectAll, Stop. Undo +% 


命令 ， 而 它们 的 源码 示意 如 下 : 


public static class ApplicationCommands 


| 
public static RoutedUICommand Cut { get | /*...*/ | | 
public static RoutedUICommand Copy 1 get 1//*...*/ jj 
public static RoutedUICommand Paste | get | /*...*/ | ] 
public static RoutedUICommand Delete { get { /*...*/ 1 
public static RoutedUICommand Undo | get | /*...*/ 1 | 
| 


public static RoutedUICommand Redo | get | /*...*/ | | 


其 他 几 个 命令 库 也 与 之 闫 似 。 如 采 你 的 程序 中 需要 诸如 Open、 
Save、Play、Stop 等 标准 命令 那 束 没 必 要 目 己 声明 了 了， 直接 拿 命 令 库 来 
His. 


9.1.5 ”命令 参数 


有 前面 提 到 命令 库 里 有 很 多 WPF 预 制 的 命令 ， 如 New、Open、 
Copy、Cnut、Paste 等 。 这 些 命令 都 是 ApplicationCommands 类 的 静态 属 
性 ， 所 以 它们 的 实例 永远 只 有 一 个 ， 这 束 引 出 一 个 问题 : 如 果 界 面 上 有 
两 个 按钮 ， 一 个 用 来 新 建 Teacher 的 档案， 另 一 个 用 来 新 建 Student 的 档 
案 ， 都 使 用 New 命 令 的 话 ， 程 序 应 该 如 何 区 别 新 建 的 是 什么 档案 呢 ? 

答案 是 使 用 CommandPrameter。 命 令 产 一 定 是 实现 了 
ICommandSource 接 口 的 对 象 ， 而 ICommandSource 有 一 个 属性 就 是 


CommandPrameter， 如 果 把 命令 看 作 飞 同 目 标的 炮弹 ， 那 么 
CommandPrameter 就 相当 于 闭 载 在 炮弹 肚子 里 的 “ 消 恩 ”。 下 面 是 程序 的 
实现 代码 。 

XAML 代 人 码 如 下 : 


«Window x:Class="CommandPrameterSample. Main Window” 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Command Prameter" 
Height-"240" Width-" 360" Background" LightBlue" WindowStyle-"ToolWindow" 

«Grid Margin-"6"» 
«Grid. RowDefinitions? 
<RowDefinition Helght= 24" /> 
<RowDefinition Height-"4" /> 
<RowDefinition Height-"24" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height-"24" 请 
<RowDefinition Height="4" /> 
<RowDefinition Height="*" /> 
<JOrid.RowDefinitions> 
<-- 命 令 和 他 令 参 数 --> 
<TextBlock Text-"Name:" VerticalAlignment="Center" HorizontalAlignment-" Left" 
Grid. Row" 0" /> 
«TextBox x:Name="name TextBox" Margin-" 60, 0,0,0" Grid.Row-"0" /> 
«Button Content" New Teacher" Command=" New" CommandParameterz " Teacher" 
Grid. Row-"2" /> 
«Button Content-"New Student" Commandz "New" CommandParameterz "Student" 
Grid. Row-"4" /> 
«ListBox x:Name-"listBoxNewltems" Grid.Row-"6" > 
«land» 
<|-- 为 窗 体 添加 CommandBinding--^ 
<Window.CommandBindings> 
<CommandBinding Command=" New" CanExecute="New_CanExecute" 
Executed="New_Executed" /> 
</Window.CommandBindings> 
</Window> 


VN xA 
LE Ex 


代码 有 两 个 值得 注意 的 地 方 : 

两 个 按钮 都 使 用 New 命 令 ， 但 分 别 使 用 字符 串 Teacher 和 Student 作 为 参数 。 

这 次 是 使 用 XAML 代 人 码 为 窗 体 添加 CommandBinding，CommandBinding 的 CanExecute 和 
Executed 事 件 处 理 需 写 在 后 人 台 C# 代 但 里 。 


CommandBinding 的 两 个 事件 处 理 器 代码 如 下 : 


private void New CanExecute(object sender, CanExecuteRoutedEventArgs e) 
| 

if (string.IsNullOrEmpty(this.name TextBox, [ext) ) 

| 


e.CanExecute = false; 


l 
j 


else 


Í 
l 


e.CanExecute = true; 


private void New Executed(object sender, ExecutedRoutedEventArgs e) 
| 
string name = this.name TextBox. Text; 
if (e.Parameter.ToString() == "Teacher" ) 
| 
this.lis«BoxNewlItems.Items.Add(string.Format("New Teacher: (0), ZA, EAM. ",name)); 
| 
if (e,Parameter, ToString() == "Student") 
| E 
this.listBoxNewltems.Items.Add(string.Format("New Student: (0), 1422]. KAR] E, ", name): 


运行 程序 ， 当 TextBox 中 疫 有 内 容 时 两 个 按钮 均 不 可 用 ， 当 输入 文 
Sb ， 单 击 按钮 ，ListBox 会 加 入 不 同 条 目 。 效 果 如 图 9-3 
示 。 


Command Prameter x | Command Prameter 


Mame Timothy 


New Student | 


New Student Timothy, EZ, KAOL: 
New Teacher: Timothy, SERE, BAFE. 
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9.1.6 命令 与 Binding 的 结合 


初试 命令 ， 你 可 能 会 想到 这 样 一 个 问题 ， 控件 有 很 多 事件 ， 可 以 让 
我 们 进行 各 种 各 样 不 同 的 操作 ， 可 控件 只 有 一 个 Command 必 性、 而 命令 
库 中 却 有 数 十 种 命令 ， 这 样 怎 么 可 能 使 用 这 个 唯一 的 Command 属 性 来 调 
用 那么 多 种 命令 呢 ? 答案 是 : 使 用 Binding。 前 面 已 经 说 过 ，Binding 作 
为 一 种 间接 的 、 不 固定 的 赋值 手段 ， 可 以 让 你 有 机 会 选择 在 某 个 条 件 下 
J HERIR ERE (有 时 候 需 要 倍 助 Converter) 。 

例如 ， 如 末 一 个 Button 所 关联 命令 有 可 能 根据 菜 些 条 件 而 改变 ， 我 
们 可 以 把 代码 写成 这 样 : 


«Button x:Name="dynameCmdBtn" Command=" | Binding Path=ppp, Source-sss;" Content=" Command" /> 
不 过 话说 回来 ， 因 为 大 多 数 命 令 按 钮 部 有 相对 应 的 图 标 来 表示 国定 
的 含义 ， 所 以 日 党 工作 中 一 个 控件 的 命令 一 经 确定 束 很 少 改变 。 
92 Jr án 
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CommandBinding 和 与 乙 相 关 的 事件 处 理 融 ) ， 我 们 第 需要 定义 目 己 的 


命令 。 本 节 中 我 们 走 近 WPF 命 令 ， 先 由 训 析 RoutedCommand 入 手 ， 再 创 
建 自己 的 命令 。 


9.2.1 ICommand 接 口 与 RoutedCommand 


WPF 的 命令 是 实现 了 ICommand 接 口 的 类 。ICommand 接 口 非 常 简 
单 ， 只 包含 两 个 方法 和 一 个 事件 : 

e Execute 方 法 : 命令 执行 ， 或 者 说 命令 作用 于 命令 目标 之 上 。 需 
要 注意 的 是 ， 现 实 世 界 中 的 命令 是 不 会 目 己 “执行 ?的 ， 它 只 能 “被 执 
行 "”， 而 在 这 里 ， 执 行 变 成 了 命令 的 方法 ， 鼎 有 点 儿 拟 人 化 的 味道 。 

e CanExecute 方 法 : 在 执行 之 前 用 来 探知 命令 是 个 可 被 执行 。 

e CanExecuteChanged 事 件 : 当 命 令 可 执行 状态 发 生 改 变 时 ， 可 油 
发 此 事件 来 通知 其 他 对 象 。 

RoutedCommand 吏 是 这 样 一 个 实现 了 ICommand 接 口 的 类 。 
RoutedCommand 在 实现 ICommand 接 口 时 ， 并 未 同 Execute 和 CanExecnute 
方法 中 这 加 任何 逻辑 ， 也 就 是 说 ， 它 是 通用 的 、 与 具体 业务 馆 辑 无 天 
的 。 怎 么 理解 这 个 “与 具体 业务 馆 辑 无 天 的 ? 呢 ? 让 我 们 从 外 部 和 内 部 两 
方面 来 理解 。 

从 外 部 来 看 ， 让 我 们 回顾 一 下 ApplicationCommands 命 令 库 里 的 命 


令 们 : 


public static class ApplicationCommands 


| 
| 


public static RoutedUICommand Cut | get | /*...*/ + | 
public static RoutedUICommand Copy | get 1 /*...* 


| 1 
i 
public static RoutedUICommand Paste | get 1.1 | 
public static RoutedUICommand Delete | get 1/*...*/ | | 
public static RoutedUICommand Undo | get 1 //*...*/ | | 


publie static RoutedUICommand Redo | get | /*...*/ | j 


虽然 他 们 都 有 目 己 的 名 字 〈 如 Copy、Paste、Cut、Delete) ， 但 它 
们 都 是 普 普 通通 的 RoutedUICommand 类 实例 。 也 就 是 说 ， 当 一 个 命令 到 
达 命 令 目 标 后 ， 有 基体 是 执行 Copy 还 是 Cut〈 即 业务 饮 辑 ) 不 是 由 命令 决 


定 的 ， 而 是 外 围 的 CommandBinding 捕 狭 到 命令 目标 有 党 命令 激发 而 发 送 
的 路 由 事件 后 在 其 Executed 事 件 处 理 器 中 完成 。 换 句 话说 ， 束 算 你 的 
CommandBinding 在 捕 捉 到 Copy 命 令 后 执行 的 是 清除 操作 也 与 命令 无 


天 。 
从 内 部 分 机 ， 我 们 束 要 旋 谈 RoutedCommand 的 源码 了 。 
RoutedCommand 类 与 命令 执行 相关 的 代码 简化 如 下 : 
public class RoutedCommand : ICommand 
| 
/! 由 ICommand 继承 而 来 ， 仅 供 内 部 使 用 
private void ICommand.Execute(object parameter) 
| 
Execute(parameter, FilterInputElement(Keyboard.FocusedElement)); 


新 定义 的 方法 ， 可 由 外 部 调用 
public void Execute(object parameter, IInputElement target) 


Í 
I 


1 命令 目标 为 空 ， 交 定 当前 具有 焦点 的 控件 作为 目标 
if (target == null) 
| 


target = FilterInputElement(Keyboard.FocusedElement); 


I WALT ETE SR 


ExecuteImpl(parameter, target, false); 


I| RaES TR DER MOEA REA 
private bool ExecuteImpl(object parameter, InputElement target, bool userInitiated) 


Í 
l 


ll 

UIElement targetUIElement = target as UIElement; 

Hus 

ExecutedRoutedEventArgs args = new ExecutedRoutedEventArgs(this, parameter); 


args. RoutedEvent = CommandManager.PreviewExecutedEvent; 


if (targetUIElement != null) 
| 


targetUIElement. RaiseEvent(args, userlnitiated); 


return false; 


I| 男 一 个 调用 Executelmpl 方法 的 函数 ， 依 序 集 级 别 可 用 
internal bool ExecuteCore(object parameter, lInputElement target, bool userlnitiated) 
| 
If (target — null) 
| 


target = FilterInputElement(Kevyboard.FocusedElement): 


retum ExecuteImpl(parameter, target, userInitiated)); 


Dhu 


| 


阅读 代码 我 们 可 以 发 现 ， 从 ICommand 接 口 继承 来 的 Execute 并 没有 
被 公开 (甚至 可 以 说 是 废弃 不 用 了 ) ， 仪 仪 是 调用 新 声明 的 带 两 个 参数 
的 Execute 方 法 。 新 声明 的 斋 两 个 参数 的 Execute 方 法 是 对 外 公开 的 ， 可 
以 使 用 第 一 个 参数 同 命 令 传 递 一 些 数 据 ， 第 二 个 参数 是 命令 的 目标 ， 如 
果 日 标 为 null，Execute 方 法 束 把 当前 拥有 焦点 的 控件 作为 命令 的 目标 。 


新 的 Execute 方 法 会 调用 命令 执行 逻辑 的 核心 一 一 ExecuteImpl] 方 法 

(ExecuteImpl 是 Execute Implement 的 缩写 ) ， 而 这 个 方法 内 部 并 没有 什 
么 神秘 的 东西 ， 简 要 而 言 承 是 “信用 ”命令 目标 的 RaiseEvent 把 
RoutedEvent 发 送出 去 。 显 然 ， 这 个 事件 会 被 外 围 的 CommandBinding 捕 
医 到 然后 执行 程序 员 预 设 的 与 业务 相关 的 逻辑 。 

最 后 ， 我 们 以 ButtonBase 为 例 看 看 UI 控件 是 如 何 发 运 命 令 有 的 。 

ButtonBase 是 在 Click 事 件 肥 生 时 友 送 命令 的 ， 而 Click 事 件 的 激发 是 放 在 
OnCjlick 方 法 里 。ButtonBase 的 OnCjlick 方 法 如 下 : 





public class ButtonBase: ContentControl, ICommandSource 


| 
1 


[| WW Click 路 由 事件 ， 然 后 发 送 命令 
protected virtual void OnClick() 


Í 
l 


RoutedEventArgs newEvent = new RoutedEventArgs(ButtonBase.ClickEvent, this); 


RaiseEvent(newEvent ; 


省 调用 内 部 类 CommandHelpers 的 ExecuteCommandSource 方法 


MS.Internal.Commands.CommandHelpers.ExecuteCommandSource(this ; 


ButtonBase 调 用 了 一 个 .NET Framework 内 部 类 Go 2S1 48 Hp EE FE 
员 其 露 ) CommandHelpers 的 ExecuteCommandSource 方 法 ， 并 把 
ButtonBase 对 象 目 己 当 作 参 数 传 7 了 进去。 如 果 我 们 走 进 
ExecuteCommandSource 方 法 内 部 就 会 发 现 这 个 方法 实际 上 是 把 传 进来 的 
参数 当 作 命令 源 、 调 用 命令 源 的 ExecuteCore 方 法 (本 质 上 是 调用 其 
ExecuteImpl 方 法 ) 、 获 取 合 令 源 的 CommandTarget 属 性 值 〈( 命 令 日 标 ) 
并 使 命令 作用 于 命令 目标 之 上 。 


Internal static class CommandHelpers 


Il ... 
internal static void ExeeuteCommandsSource(ICommandSource commandSource) 
Í 


CriticalExecuteCommandSource(commandSource, false); 


internal static void CriticalExecuteCommandSource(ICommandSource commandSource, bool userInitiated) 
i 
ICommand command = commandSource.Command; 
if (command != null) 
| 
object parameter = commandSource.CommandParameter: 
IInputElement target = commandSource. Command Target; 


RoutedCommand routed = command as RoutedCommand; 


IÍ (routed ! null) 


| 
[ 


If (target — null) 
| 


target = commandSource as IInputElement; 


| 


if (routed.CanExecute(parameter, target)) 
| 


routed. ExecuteCore(parameter, target, userInitiated); 


else if (command.CanExecute(parameter)) 


i 


command.Execute(parameter); 


9.2.2 HEX Command 


说 到 “ 目 定义 命令 ”， 我 们 可 以 分 两 个 层次 来 理解 。 第 一 个 层次 比较 
浅 ， 指 的 是 当 WPF 命 令 库 中 没有 包含 想 要 的 命令 时 ， 我 们 就 得 声明 定义 
目 己 的 RoutedCommand 实 例 。 比 如 你 想 让 命令 目标 在 命令 到 达 时 发 出 笑 
声 ，WPF 命 令 库 里 没有 这 个 命令 ， 那 就 可 以 定义 一 个 名 为 Laugh 的 
RoutedCommand 实 例 。 很 难说 这 是 真正 意义 上 的 “ 目 定 义 命令 ”， 这 只 是 
对 RoutedCommand 的 使 用 。 第 二 个 层次 是 指 从 实现 ICommand 接 口 开 

人 ， 定 义 目 己 的 命令 并 且 把 菜 些 业务 妙 辑 也 包含 在 命令 之 中 ， 这 才 称 得 
上 是 真正 意义 上 的 上 自 定 义 命令 。 但 比较 国手 的 是 ， 在 WPE 的 命令 系统 中 
命令 源 (包括 ButtonBase、Menultem、ListBoxltem、Hyperlink) 、 
RoutedCommand 和 CommandBinding 三 者 互相 依赖 的 相当 紧密 。 在 源 人 码 
级 别 上 ， 不 但 没有 将 与 命令 相关 的 方法 声明 为 virtual 以 供 我 们 重 写 ， 而 
用 还 有 很 多 未 回程 序 员 公 开 的 进 辑 〈 比 如 对 ExecuteCore 和 
CanExecuteCore 这 些 方法 的 声明 和 调用 ) 。 换 人 句 话 说 ，WPF 目 市 的 命令 
源 和 CommandBinding 就 是 专门 为 RoutedCommand 而 编写 的 ， 如 果 我 们 
想 使 用 目 己 的 ICommand 派 生 类 就 必须 连 命 令 源 一 起 实现 〈( 即 实现 
ICommandSource 接 口 ) 。 因 此 ， 为 了 人 简便 地 使 用 WPF 这 僚 成 熟 的 体 
系 ， 为 了 更 局 效 座 地 “从 零 开 始 ” 打 造 日 己 的 命令 系统 ， 需 要 我 们 根据 项 
目的 实际 情况 进行 权衡 。 

既然 本 节 名 为 目 定 义 命令 ， 那 么 我 们 就 从 实现 ICommand 接 口 开 
始 、 打 造 一 个 “ 纯 手工 ”的 目 定 义 命令 。 

前 面 已 经 多 次 提 到 ，RoutedCommand 与 业务 逻辑 无 关 ， 业 务 逻 辑 要 
依靠 外 围 的 CommandBinding 来 实现 。 这 样 一 来 ， 如 果 对 
CommandBinding 和 党 理 不 伏 融 有 可 能 造成 代码 杂乱 无 章 ， 毕 竟 一 个 
CommandBinding 要 替 扯 到 谁 是 它 的 特 主 以 及 它 的 两 个 事件 处 理 需 。 

为 了 窗 化 使 用 CommandBinding 来 处 理 业 务 馆 辑 的 程序 结构 ， 我 们 
可 能 会 希望 把 业务 逻辑 移入 命令 的 Execute 方 法 内 。 比 如 ， 我 们 可 以 上 自 
定义 一 个 名 为 Save 的 命令 ， 当 命令 到 达 命 令 目 标的 时 候 先 通过 命令 目标 
的 IChanged 属 性 判断 命令 目标 的 内 容 是 否 已 经 被 改变 ， 如 果 已 经 改变 
则 命令 可 以 执行 ， 命 令 的 执行 会 下 接 调 用 命令 目标 的 Save 方 法 、 驱 动 命 
令 目 标 以 目 己 的 方式 保存 数据 。 很 显然 ， 这 回 是 命令 直接 在 命令 目标 上 
起 作用 了 ， 而 不 像 RoutedCommand 那 样 先 在 命令 目标 上 激发 出 路 由 事件 
等 外 围 控 件 捕捉 到 事件 后 再 “ 翻 过 头 来 ?对 命令 目标 加 以 处 理 。 你 可 能 会 
|]: “如 果 命 令 目 标 不 包含 IsChanged 和 Save 方 法 怎么 办 ? ”这 天 要 靠 接 口 
来 约束 了 ， 如 果 我 在 程序 中 定义 这 样 一 个 接口 : 


public interface [View 


Í 
| 


I| 属性 
bool IsChanged | get; set; } 


void SetBinding(); 
void Refresh(); 
void Clear(); 

void Save(); 


Hn rtt 


并 且 要 求 每 个 需要 接受 命令 的 组 件 都 必须 实现 这 个 接口 ， 这 样 束 确保 了 
命令 可 以 成 功 地 对 它们 执行 操作 。 
接 下 来 ， 我 们 实现 ICommand 接 口 ， 创 建 一 个 专门 作用 于 IView 派 生 


类 的 命令 。 


I! BE Xn 
public class ClearCommand : ICommand 


| 
l 


I| 当 命令 可 执行 状态 发 生 改变 时 ， 应 当 被 激发 


public event EventHandler CanExecuteChanged; 


I| RETRAIT ARN) 
public bool CanExecute(object parameter) 


Í 
l 


throw new NotlmplementedException(); 


I| 命令 执行 ， 带 有 与 业务 相关 的 Clear 逻辑 
public void Execute(object parameter) 
| 

[View view = parameter as View; 

if (view != null) 

| 


view.Clear(); 


| 
] 


命令 实现 了 ICommand 接 口 并 继承 了 CanExecuteChanged 事 件 、 
CanExecute 方 法 和 Execute 方 法 。 目 前 这 个 命令 比较 简单 ， 只 用 到 了 
Execute 方 法 。 在 实现 这 个 方法 时 ， 我 们 将 这 个 方法 唯一 的 参数 作为 命 
令 的 目标 ， 如 果 目 标 古 TView 接 口 的 派生 类 则 调用 其 Clear 方 法 
然 ， 我 们 已 经 把 业务 逻辑 引入 了 命令 的 Execute 方 法 中 。 

有 J 了 了 目 定义 命令 ， 我 们 拿 什 么 命令 源 来 “发 射 " 它 昵 ?前面 说 过 ， 
WPEF 命 令 系 统 的 命令 源 是 专门 为 RoutedCommand; 稚 备 的 并 且 不 能 重 写 ， 
所 以 我 们 只 能 通过 实现 ICommandSource 接 口 来 创建 自己 的 命令 源 。 代 
RB F: 


T 





I BELMA 
public class MyCommandSource : UserControl, ICommandSource 
| 
路 继承 目 ICommandSouree 的 三 个 属性 
public ICommand Command | get; set; } 
public object CommandParameter { get; set; ! 


public HnputElement CommandTarget | get; set; | 


I| 在 组 件 被 单 击 时 连 市 执行 命令 
protected override void OnMouseLeftButtonDown( MouseButtonEventArgs e) 
| 

base.OnMouseLeftButtonDown(e); 


I| (Ear o Hb ET o. NEm e ERIT ro HE 


if (this.CommandTarget != null) 
| 
| 


this. Command. Execute(this.Command Target); 


ICommandSource$Z O H £) Command, CommandParameter^ll 
CommandTarget 三 个 属性 ， 人 至 于 这 三 个 属性 之 则 有 什么 样 的 天 系 束 要 看 
我 们 怎么 实现 了 。 在 本 例 中 ，CommandParameter 完 全 没有 人 刻 用 到 ， 而 
CommandTarget 被 当 作 参数 传递 给 了 Command 的 Execute 方 法 。 命 令 不 会 
Hog. BU LUE SS u THEATRIS DL» 本 例 中 我 
们 在 控件 和 被 左 单 击 时 执行 命令 。 

现在 命令 和 命令 源 都 有 了 ， 还 大 一 个 可 用 的 命令 目标 。 因 为 我 们 的 
ClearCommand 专 门 作用 于 IView 的 派生 类 ， 所 以 合格 的 ClearCommand 合 
令 目 标 必 须 实 现 IView 接 口 。 设 计 这 种 既 有 UI 又 需要 实现 接口 的 类 可 以 
先 用 XAML 编 各 器 锋 实 现 其 UI 部 分 再 找到 它 的 后 台 C# 代 人 码 实现 接口 ， 原 理 

很 简单 ，WPEF 会 自 动 为 I 元 素 类 添加 partial 关 键 字 修饰 ，XAML 代 码 会 
被 翻译 成 类 的 全 个 部 分 ， 后 侣 代码 是 类 的 另 一 个 部 分 (其 全 可 以 青 多 洪 
加 几 个 部 分 ) ， 我 们 可 以 在 后 台 代 码 部 分 指定 基 类 或 实现 接口 ， 最 终 这 
些 部 分 会 被 编译 到 一 起 。 


这 个 组 件 的 XAML 部 分 如 下 : 


<UserControl x:Class-"WpfApplication] .MiniView" 
xmlns-"http:/schemas.microsoft.com/ winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Height-"1 14" Width-" 200" 
«Border ComerRadius-"5" BorderBrush-" LawnGreen" Border Thickness="2"> 
<StackPanel> 
«TextBox x:Name-"textBox 1" Margin-"5" /> 
«TextBox x:Name-"textBox2" Margin-"5,0" /> 
«TextBox x:Name-"textBox3" Margin-"5" /> 
«TextBox x:Name-"textBox4" Margin-" 5,0" /> 
</StackPanel> 
</Border> 


<JUserControl> 


它 的 后 台 代 码 部 分 如 下 : 


路 日 定义 命令 目标 
public partial class MiniView : UserControl, IView 


| 


public MiniView() 
| 


InitializeComponent(); 


I| SK IView 的 成 员 们 

public bool IsChanged | get; set; | 
public void SetBinding() [/*...*/ — | 
public void Refresh() |.— /*...*/] 
publie void Save() (/*...*/1 


/ HIBA 512 SR 

public void Clear() 

| 
this.textBox | .Clear(); 
this.textBox2.Clear( ); 
this.textBox3.Clear( ); 
this.textBox4.Clear( ); 


因为 我 们 只 演示 命令 令 对 Clear 方 法 的 调用 ， 所 以 其 他 几 个 方法 没有 县 
体 实 现 。 -iClear/ iz CORR 的 时 候 ， 它 的 几 个 TextBox 会 被 清空 。 

最 后 是 把 自 定 义 的 命令 、 命 令 源 和 命令 目标 集成 起 来 。 窗 体 的 
XAML 代 人 码 如 下 : 


«Window x:Class="WptfApplicationl.Windowl " 


xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: WpfApplication]" Titlez" Command" Height-" 205" 
Width-"250"» 

<StackPanel> 
«]ocal:MyCommandSource x:Name="ctrlClear" Margin-" 10^ 

<TextBlock Text-" 5|" FontSize-" 16" TextAlignment-" Center" 
Backeround-" LightGreen" Width" 80" > 

«flocal:MyCommandSource- 
«Jocal:MiniView x: Name-"miniView" /> 

«/StackPanel^ 


«Window? 


Aso] HEH Y Bj EI CAS TE Zr ig m UR ses, SES ETE PR RT 


以 使 用 图 标 、 按 钮 或 更 复杂 的 内 容 来 填充 它 ， 但 要 注意 适当 更 改 激 发 命 
令 的 方法 。 比 如 你 打算 在 里 面 放置 一 个 按钮 ， 那 么 就 不 要 用 重 写 
OnMouseLeftButtonDown 的 方法 来 执行 命令 了 ， 而 应 该 捕捉 Button.Click 
事件 并 在 事件 处 理 器 中 执行 方法 (Mouse 事件 会 被 Button“ 吃 挤 ”) 。 


后 合 C# 代 人 码 如 下 : 


public partial class Window] : Window 


; 
1 


public Windowl() 


Í 
l 


InitializeComponent(); 


小 声明 命令 开 使 命令 源 和 目标 与 之 关联 
ClearCommand clearCmd = new ClearCommand(); 
this.ctrlClear. Command = clearCmd; 
this.etrlClear.CommandTarget = this.miniView; 


我 们 先 创 建 了 一 个 ClearCommand 命 令 的 实例 并 把 它 赋值 给 自 定 义 


命令 产 的 Command 属 性 ， 目 定义 命令 源 的 CommandTarget 属 性 值 是 目 定 


义 命 令 日 标 MiniView 的 实例 。 提 醒 一 句 : 为 了 讲解 清晰 才 把 


命令 声明 放 


在 这 里 ， 正 规 的 方法 应 该 是 把 命令 声明 在 静态 全 局 的 地 方 供 所 有 对 象 使 
用 。 
”运行 程序 ， 在 TextBox 里 输入 文字 再 单 击 “ 清 除 ”控件 ， 效 果 如 图 9-4 


| 1^ Command 
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图 9-4 ”运行 效果 
至 此 ， 一 个 简单 的 目 定 义 命 令 束 完成 了 。 大 和 想 通过 Command 的 
CanExecute 方 法 返回 值 来 影 啊 命 令 源 的 状态 ， 还 需要 使 用 ICommand 和 和 
ICommandSource 接 口 的 成 员 组 成 更 复杂 的 妙 辑 ， 介 于 访 幅 原因 不 再 费 


10 
UR NT E Th t a 


我 们 把 有 用 的 东西 称 为 次 源 。“ 兵 马 末 动 ， 粮 晶 先 行 ” 一 一 在 序 中 的 
各 种 数据 惑 是 算法 的 原料 和 粮草 。 程 序 中 可 以 存放 数据 的 地 方 有 很 多 ， 
可 以 放 在 数据 库 里 、 可 以 存储 在 变量 里 。 界 于 数据 库存 储 和 变量 存储 之 
站 ， 我 们 还 可 以 把 数据 存储 在 程序 主体 之 外 的 文件 里 。 外 部 文件 与 程序 
主体 分 离 ， 这 就 有 可 能 丢失 或 损坏 ， 为 了 避 倪 于 失 或 损坏 ， 编 详 此 允许 
我 们 把 外 部 文件 编译 进程 序 主体 、 成 为 程序 主体 不 可 分 割 的 一 部 分 ， 这 
台 是 传统 意义 上 的 程序 资源 《也 称 为 二 进 制 资 源 ) 。 

WPF 不 但 文 持 程序 级 的 传统 资源 ， 同 时 还 推出 了 狸 具 特 色 的 对 象 级 
和 资源， 每 个 界面 元 系 午 可 以 携 市 目 己 的 资源 并 可 被 目 己 的 于 级 元 承 共 
胖 。 比 如 后 面 草 世 要 讲 到 的 各 种 模板 、 程 序 样式 和 主题 束 经 种 放 在 对 象 
级 资源 里 。 这 样 一 来 ， 在 WPF 程 序 中 数据 融 分 为 四 个 等 级 仓储 了 : 数据 
库 里 的 数据 相当 于 存放 在 仓库 里 ， 资 源 文 件 里 的 数据 相当 于 放 在 旅行 箱 
里 ，WPF 对 象 资 源 里 的 数据 相当 于 放 在 随 吴 携 市 的 衣 包 里 ， 变 量 中 的 数 
所 相当 于 拿 在 手 里 。 
本 章 先 来 学 习 WPF 对 象 级 资源 ， 然 后 回顾 传统 资源 在 WPF 中 的 使 


10.1 WPF 对 象 级 资源 的 定义 与 查找 
每 个 WPF 的 界面 元 和 都 具有 一 个 名 为 Resources 的 属性 ， 这 个 属性 继 


其 日 FrameworkElement 类 ， 其 类 型 为 ResourceDictionary。 
ResourceDictionary 能 够 以 “ 键 一 值 ? 对 的 形式 存储 资源 ， 当 需要 使 用 某 个 
资源 时 ， 使 用 “ 键 一 全 ?对 可 以 索引 到 资源 对 象 。 在 保存 资源 时 ， 
ResourceDictionary 视 资源 对 象 为 object 类 型 ， 所 以 在 使 用 资源 时 先 要 对 
资源 对 象 进行 类 型 转换 ，XAML 编译 器 能 够 根据 标签 的 Attribute 自 动 识 
列 资 源 类 型 ， 如 果 类 型 不 对 束 会 抛 出 寞 浊 ， 但 在 C# 代 人 码 里 检索 到 资源 对 
象 后 ， 关 型 转换 的 事情 束 只 能 由 我 们 目 己 来 做 了 。 

ResourceDictionary 可 以 存储 任意 美 型 的 对 象 。 在 XAML 代 码 中 辐 
Resources 洪 加 资源 时 需要 把 正确 的 名 称 空间 引入 到 XAML 代 人 码 中 。 让 我 
们 看 一 个 例子 : 


«Window x:Class-"WpfApplicationl .Windowl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys-" clr-namespace:System;assembly2mscorlib" 
Title-"Resource" FontSize-"16"7 

xWindow.Resources? 
«ResourceDictionary? 
«sys:String x:Keyz"str"» 
沉 髓 侧 畔 王 帆 过 ， 病 树 前头 万 木 春 。 
«Jsys:String» 
«sys:Double x: Keyz"dbl"»3.1415926«/sys:Double» 
«/ResourceDictionary? 
</Window. Resources> 
<StackPanel> 
<TextBlock Text="[StaticResource ResourceKey-str]" Margin-" 5" /> 
<l--<TextBlock Text-" [StaticResource ResourceKey=dbli" />--> 
</StackPanel> 
</Window> 


首先 将 System 名 称 空间 引入 XAML 代 码 并 映射 为 sys 名 称 空 间 ， 然 后 
在 Window.Resources 属 性 里 添加 了 两 个 资源 条 目 ， 一 个 是 string 关 型 实 
例 、 一 个 是 double 关 型 实例 ， 最 后 我 用 两 个 TextBlock 来 消费 这 些 资源 
(被 注销 挥 的 代码 会 因数 据 类 型 不 匹配 而 抛 出 异 音 ) 。 程 序 的 运行 效果 
如 图 10-1 所 示 。 


B' Resource 


沉 几 侧 妊 千帆 过 ， 病 树 前 头 万 木 春 。 





图 10-1 运行 效果 


因为 在 XAML 人 代码 中 可 以 对 集合 区 型 内 容 及 标 拿 扩展 进行 简写 ， 所 
以 上 和 面 代码 更 第 见 的 书写 格式 是 这 样 : 


«Window x:Class="WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/ winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 


xmlins:sys-"clr-namespace:System;assembly-mscorlib" Title-" Resource" 
FontSize-" 16» 
«Window. Resources 
«sys:String x:Key=" str > 
沉 舟 侧 昱 千帆 过 ， 病 树 前 头 万 木 春 ， 
</sys:String> 
<sys:Double x:Key="db|">3.14159206</sys:Double> 
«Window.Resources? 
<StackPanel> 
<TextBlock Text=" {StaticResource stri" Margin="5" /> 
</StackPanel> 
«Window? 


` 


在 检索 资源 时 ， 先 查找 控件 目 己 的 Resources 属 性 ， 如 果 没 有 这 个 资 
源 程序 会 沿 痢 过 辑 树 同上 一 级 控件 查找 ， 如 果 连 最 顶层 容 右 部 没有 这 个 
资源 ， 程 序 就 会 去 查找 Application.Resources 〈 也 就 是 程序 的 顶级 资 
源 ) ， 如 采 还 没 找到 ， 那 束 只 好 抛 出 异 章 了 。 这 束 好 比 每 个 界面 元 和 际 都 
有 目 己 的 一 个 背包 ， 里 面 可 能 装着 各 种 各 样 的 资源 ， 使 用 的 时 低 打 开 找 
一 找 ， 如 条 没有 找到 还 可 以 去 翻 看 上 一 层 控件 的 育 包 ， 直 全 找到 资源 或 
报告 没有 这 个 资源 为 止 。 

如 果 想 在 C# 代 码 中 使 用 定义 在 XAML 代 码 里 的 资源 ， 大 概 格式 是 这 


private void Window Loaded(object sender, RoutedEventArgs e) 
| 

string text  (string)this.FindResource("str"; 

this.textBlock] Text = text; 


| 
| 


或 者 你 明确 地 知道 资源 放 在 哪 的 资源 词典 里 ， 吏 可 以 这 样 检 索 资 源 : 


private void Window Loaded(object sender, RoutedEventArgs e) 
| 
string text = (string)this.Resources|["str" : 
this.textBlockl Text = text; 


你 可 能 会 想 : 如 果 能 把 资源 像 CSS 或 JavaScript 那 样 放 在 独立 的 文件 
中 ， 使 用 时 成 侠 引 用 、 重 用 时 便于 分 发 总 不 更 好 ? WPEF 的 资源 当然 能 够 
做 到 这 一 点 ，ResourceDictionary 具 有 一 个 名 为 Source 的 属性 ， 只 要 把 包 
含 资源 定义 的 文件 路 任 赋 值 给 这 个 属性 束 一 切 搞定 ! 举 个 例子 ， 
http://wpf.codeplex.com 中 包含 了 很 多 官方 / 半 官 方 的 WPF 资 源 ， 其 中 包 
括 WPF 工 具 包 和 一 组 非常 漂 须 的 程序 皮肤 ， 这 些 皮 肤 以 资源 的 形式 放 在 
XAMEL 文 件 中 ， 使 用 时 仅 需 把 相应 的 XAMEL 文 件 添 加 进项 目 并 使 用 
Source 属 性 进行 引用 ， 你 的 程序 立刻 加 变 得 光鲜 有 照 人 : 


<Window.Resources> 
«ResourceDietionary Sourcez" Shiny Red.xaml" /> 

«Window.Resources? 

运行 效果 如 网 10-2 所 示 。 
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图 10-2 ”运行 效果 


10.2 日 “< 静 ”日 <“ 动 ”用 资源 


当 资 源 科 存储 进 资 源 词 典 后 ， 我 们 可 以 通过 两 种 方式 来 使 用 这 些 资 
YS 静态 方式 和 动态 方式 。Static 和 Dynamic 两 个 词 是 我 们 的 老 朋 友 
了 ， 当 这 对 己 一 同 出 现 的 时 候 Static 指 的 是 程序 的 非 执 行 状态 而 Dynamic 
指 的 是 程序 运行 状态 。 对 于 资源 的 使 用 ，Static 和 Dynamic 也 是 这 个 意 
思 。 静 态 资源 使 用 〈StaticResource) 指 的 是 在 程序 载 入 内 存 时 对 资源 的 
一 次 性 使 用 ， 之 后 束 不 再 去 访问 这 个 资源 了 ; 动态 资源 使 用 

(DynamicResource) 使 用 指 的 是 在 程序 运行 过 程 中 仍然 会 去 访问 资 

源 。 显 然 ， 如 果 你 确定 菜 些 资 源 只 在 程序 初始 化 的 时 候 使 用 一 次 、 之 后 
不 会 再 改变 ， 就 应 该 使 用 StaticResource， 而 程序 运行 过 程 中 还 有 可 能 改 
变 的 资源 应 该 以 DynamicResource 形 去 使 用 。 拿 程序 的 主题 来 举例 ， 如 
RIEF AKEE PRAE, UStaticResource A RREH 9t Js 
WET; 如 果 程 序 运 行 过 程 中 人 允许 用 户 更 改 程序 皮肤 的 配色 方 采 则 必 
须 以 DynamicResource 方 式 来 使 用 资源 。 

请 看 下 面 的 例子 。 我 在 Window 的 资源 词典 里 放置 了 两 个 TextBlock 
类 型 资源 并 分 别 以 StaticResource 和 DynamicResource 方 式 来 使 用 之 : 





<Window x:Class-" WpfApplication] Window!" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
Title" Static v.s. Dynamic" FontSize-" 16" 
«Window. Resources? 
<TextBlock x:Key-"res1" Text- "if [- EB] H" > 
<TextBlock x:Key-"res2" Text="i LEH H" P 
«/Window.Resources? 
<StackPanel> 
«Button Margin-"5,5,5,0" Content=" |StaticResource resl }" /> 
«Button Margin= 5,5,5,0" Content= | DynamicResource res21" /> 
«Button Margin" 5,5,5,0" Content" Update" Click-"Button. Click" /> 
</StackPanel> 


«Window? 


界面 上 的 第 三 个 按钮 员 贡 在 程序 运行 过 程 当中 对 资源 词典 里 的 两 个 


资源 进行 改变 : 
private void Button Click(object sender, RoutedEventArgs e) 
| 
this. Resources["res]"] = new TextBlock() Í Text = "天 涯 共 此 时 " }; 
this. Resources["res2"] = new TextBlock() Í Text = "天涯 其 此 时 " }; 
| 
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经 被 更 新 它 也 不 会 知道 。 运 行程 序 、 单 击 第 三 个 按钮 ， 效 果 如 图 10-3 所 
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图 10-3 ”运行 效果 
10.3 ”向 程序 添加 二 进 制 资源 


对 于 资源 这 个 概念 ， 很 多 WPF 的 初学 者 会 感到 迷惑 ， 因 为 早 在 WPF 
出 现 之 前 Windows 应 用 程序 束 已 经 能 够 携 市 资源 了 。Windows 应 用 程序 
资源 的 过 理 与 WinZip 或 WinRAR 压 缩 包 的 赴 理 过 不 多 ， 实 际 上 是 把 一 些 
应 用 程序 必须 使 用 的 资源 与 应 用 程序 自身 打包 在 一 起 ， 这 样 资源 束 不 会 
意外 丢失 了 《人 负 作 用 就 是 应 用 程序 体积 会 变 大 ) 。 第 见 的 应 用 程序 资源 
有 图 标 、 图 瞩 、 文 本 、 首 频 、 视 频 等 ， 各 种 编程 语言 的 编译 颖 或 资源 编 
译 器 都 有 有 能 力 把 这 些 文件 编译 进 目 标 文件 (最 终 的 .exe 或 .dl 文件 ) ， 资 
源 文件 在 目标 文件 里 以 三 进 制 数 据 的 形式 和 存在、 形成 目标 文件 的 资源 有 段 
(Resource Section? ， 使 用 时 数据 会 被 提取 出 来 。 (请 参考 
http://msdn.microsoft.com/en-us/magazine/ cc301808.aspx ) 

为 了 不 把 资源 词典 里 的 资源 和 应 用 程序 内 租 的 资源 摘 混 ， 我 们 明确 
地 称呼 资源 词典 里 的 资产 为 “WPF 资 源 ? 或 “对 象 资产 ?， 称 呼应 用 程序 的 
内 骸 资 源 为 “程序 集资 源 ” 或 “二 进 制 资源 *?”。 特 别提 醒 一 点 ，WPF 程 序 中 
写 在 <Application.Resources>...</ApplicationResources> 标 签 内 的 资源 仍 
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Properties 名 称 空间 中 的 Resources.resx 资 源 文件 。 打 开 资 源 文 件 的 方法 是 
在 项 目 管 理 右 中 展开 Properties 结 点 并 双击 Resources.resX， 如 几 10-4 所 


Solution Explorer - WpfApplication1 


BAA 
" Solution 'WpfApplicationl' (1 project) 


J. a References 
由 ， 轩 | Appxaml 


me- e Windowl.xaml 








Fi  Resources.resx | xX 


| 
abel Strings > |) Add Resource + X Remove Resource | I ( Access Modifier; Public 











| Name à Value 


Password 


UserName 























图 10-4 ”添加 字符 串 资 源 


Resources.resX 文 件 内 容 的 组 织 形 式 也 是 “ 键 一 值 ? 对 ， 编 译 后 ， 
Resources.resx 会 形成 Properties 名 称 空间 中 的 Resources 类 ， 使 用 这 个 类 的 
方法 或 属性 就 能 获取 资源 。 为 了 让 XAML 编 译 器 能 够 访问 这 个 类 ， 一 定 
要 把 Resources.resx 的 访问 级 别 由 Internal 改 为 Public。 利 用 资源 文件 编辑 


ds, HERF TIRAREN., ZS ral /EXAML4IC# 
代码 中 访问 它们 。 

在 XAML 代 码 中 使 用 Resources.resx 中 的 资产， 先 要 把 程序 的 
Properties 名 称 空间 映射 为 XAML 名 称 空间 ， 然 后 使 用 x:Static 标 符 扩 展 来 
访问 资源 : 

«Window x:Class-" WpfApplication]. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Xmljns:prop= clr-namespace: WpfA pplication].Properties" 
Title= Binary Resource 
«Gnd Margin-" 3 > 
«Grid. ColumnDefinitions? 
«ColumnDefinition Width" Auto" /> 
«ColumnDefinition Width-"4" /> 
«ColumnDefinition Widthz"*" /> 
«lGnd.ColumnDefinitions? 
«Grid. RowDefinitions? 
<RowDefinition Height-"23" /> 
<RowDefinition Height="4" /> 
<RowDefinition Height="23" /> 
</Grid.RowDefinitions> 
<TextBlock Textz" [x:Static prop:Resources. UserName]" > 
<TextBlock x:Name="textBlockPassword" Grid.Row="2" /> 
<TextBox BorderBrush="Black" Grid.Column="2" /> 
<TextBox BorderBrush="Black" Grid.Column-"2" Grid.Row-"2" /> 
</Grid> 
«Window? 


C# 人 代码 中 访问 Resources.resx 中 的 资源 与 使 用 一 般 别 无 二 致 : 


public Window10) 
| 
InitializeComponent(); 
this.textBlockPassword. Text = Properties. Resources.Password; 
| 
运行 效果 如 图 10-5 所 示 。 








图 10-5 “运行 效果 


使 用 Resources.resx 最 大 的 好 处 就 是 便于 程序 的 国际 化 、 本 地 化 。 如 
果 我 想 把 界面 改 为 英文 版 ， 只 需要 把 资源 的 值 改 为 相应 的 英文 即 可 ， 如 
因为 我 在 程序 中 访问 资源 使 用 的 是 资源 的 名 ， 所 以 代码 无 
H8 ENLZJ] o 
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UserName Name 


图 10-6 ”使 用 Resources.resx 的 好 处 


如 果 需 要 添加 的 资源 不 是 字符 串 而 是 图 标 、 图 片 、 音 频 或 视频 ， 方 
法 就 不 是 使 用 Resources.resx 了 ，WPF 不 支持 这 样 做 。 在 WPF 中 使 用 外 部 
文件 作为 资源 ， 仪 需 简 单 地 将 其 加 入 项 目 即 可 。 方 法 是 在 项 目 管 理 器 中 
右 击 项 目 名 称 ， 在 弹出 菜单 里 选择 Add New Folder， 按 需要 新 建 几 层 
文件 夹 来 组 织 资源 ， 然 后 在 恰当 的 文件 夹 上 右 击 ， 在 弹出 订单 里 选择 
Add > Existing Item...， 在 文件 对 话 框 里 选择 文件 后 单 击 Add 按 钮 ， 文 件 
就 以 资源 形式 加 入 到 项 目 中 了 。 

如 果 在 程序 中 添加 了 一 个 mp3 文 件 和 一 张 图 片 ， 如 图 10-7 所 示 ， 结 
果 文 件 的 体积 束 会 脱 胀 好 几 兆 : 
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. E- ËB Audio 
= | ss 8] Background mp3 
|o Dl kons 
B > Ë Images 


àl Rafalejpg ! . 
m Video , Name Type Size 


" æ Appxaml T| BinaryResources Application 1045 KB | 
m- œ Windowl xaml Œ] BinaryResources Program Debug Database 32 KB 
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图 10-7 ”在 程序 中 添加 一 个 mp3 和 一 张 图 片 


注意 

有 一 点 特别 提醒 大 家 注意 ， 那 束 是 如 果 想 让 外 部 文件 编译 进 目 标 成 为 二 进 制 资源 ， 必 须 
在 属性 窗口 中 把 文件 的 Build Action 属 性 值 设 为 Resource〈( 如 图 10-8 所 示 ) 。 并 不 是 每 种 文件 都 
会 目 动 设 为 Resource， 比 如 图 厂 文 件 会 ，mp3 文 件 束 不 会 。 一 般 情 况 下 如 果 BuildAction 属 性 被 设 
为 Resource， 则 Copy to Output Directory 属 性 就 设 为 Do not copy; 如 果 不 希 望 以 资源 的 形式 使 用 
外 部 文件 ， 可 以 把 BuildAction 设 为 None， 而 把 Copy to Output Directory 设 为 Copy always。 男 外 ， 
BuildAction 属 性 的 下 拉 列 表 里 有 一 个 鼎 具 迷惑 性 的 值 Embedded Resource， 不 要 选择 这 个 值 。 


Properties 


Rafale.jpg File Properties 


Build Action Resource Build Action Resource 
Copy to Output Directory Do not copy Copy to Output Directory Do not copy 
Custom Tool Custom Tool 

Custom Tool Namespace Custom Tool Namespace 


File Name Background.mp3 | File Name RafaleJpg 





Full Path CAUsersAdministi Full Path CAUsersVAdminist 


Build Action Build Action 
How the file relates to the build and How the file relates to the build and 
deployment processes, deployment processes, 








图 10-8 ”设置 文件 的 BuildAction 属 性 
10.4 ”使 用 Pack URI 路 径 访 问 二 进 制 资源 


好 了 ! 二 进 制 资源 已 经 被 添加 进 我 们 的 程序 ， 怎 样 才 能 访问 到 它们 
呢 ? 

WPF 对 二 进 制 资源 的 访问 有 自己 的 一 套 方法 ， 称 为 Pack URI 路 径 。 
有 时 候 死 记 便 背 既 能 帮助 读者 快速 学 习 又 能 帮助 作者 偷 点 小 懒 ， 比 如 
WPF 的 Pack URI 路 径 ， 你 只 需要 记 住 这 样 的 格式 即 可 : 


packapplication,,[/ 程 序 集 名 称 ;][ 可 选 版 本 号 ;][ 文 件 夹 名 称 中 文件 名 称 
而 实际 上 为 pack://application,,, 可 以 和 省略 、 程 序 集 名 称 和 版 本 号 澡 
使 用 号 省 值 ， 所 以 剩 下 的 整 只 有 这 个 了 了: 
[x EXEC ERN 
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目 里 的 路 径 是 Resources/Images/Rafale.jpg， 原 封 不 动 使 用 这 个 路 径 束 可 
以 访问 此 图 记 了 。 我 们 用 这 个 图 厂 填 元 一 个 <Image/> 元 系 并 把 <Image/> 
元 系 作 为 窗 体 的 背景 : 


«Window x:Class="WpfApplication1. Window!" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title-"Binary Resource" 
«Grid» 

«]mage x: Name-"ImageBg" Sourcez" Resources/Images/Rafale.jpg" Stretch-"Fill" /> 
</Grid> 


«Window» 


HY: 


«Window x:Class-" WpfApplicationl Window 1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Binary Resource"? 

«Gnd» 
«|mage x:Name-"ImageBg" 
Sourcez " pack://application:,,/Resources/Images/Rafale.jpg " 
Stretch-" Fill" /> 
</Grid> 


</Window> 
与 之 等 价 的 C# 代 人 码 如 下 : 


public Window]() 
| 


ImtializeComponent(); 


Uri imgUri = new Uri(@"Resources/Images/Rafale.jpg", UriKind.Relative); 
this.ImageBg.Source = new Bitmaplmage(imgUri); 


uk; 


public Window10) 
| 
InitializeComponent(; 
Uri imgUri = new Uri((Q" pack://application:,,. /Resources/Images/Rafale.jpg", UriKind.Absolute); 
this.ImageBg.Source = new Bitmaplmage(imgUri); 
| 
运行 效果 如 图 10-9 所 示 。 
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图 10-9 ”运行 效果 


注意 
在 使 用 Pack URI 路 径 时 有 几 点 需要 注意 : 
Pack URH ME qZEBJAERIZE CO. 表示 路 径 。 





e 

e 使 用 缩 略 写法 意味 着 是 相对 路 径 ，C# 代 码 中 的 UriKind 必 须 为 Relative 而 且 代 表 根 目录 
的 /可 以 省 略 。 

e 使 用 完整 写法 时 是 绝对 路 径 ，C# 代 查 中 的 UriKind 必 须 为 Absolute 并 且 代 表 根 目录 的 / 
不 能 省 略 。 

e 使 用 相对 路 径 时 可 以 借助 类 似 DOS 的 语法 进行 导航 ， 比 如 ./ 代 表 同 级 目录 、../ 代 表 父 级 


H3K. 


11 
深入 浅 出 话 模板 


图 形 用 户 界 面 应 用 程序 较 之 控制 台 界 而 应 用 程序 最 大 的 好 处 束 是 罕 
面 友 好 、 数 据 显 示 百 观 。CUI 程 序 中 数据 只 能 以 文本 的 形 却 线 性 显示 ， 
GUI 程序 则 允许 数据 以 文本 、 列 表 、 疼 形 等 多 种 形式 立体 显示 。 

用 户 体 验 在 GUI 程序 设计 中 起 痢 举 足 轻重 的 作用 HIP Bu 
ITA EC f A EX KIRE? 控件 如 何 安 排 才 简单 易 用 并 且 少 犯错 误 ? 
这 些 都 是 设计 师 需 要 考虑 的 问题 。WPF 系 统 不 但 文 持 传统 Windows 
Forms 编 程 的 用 户 弄 面 和 用 户 体 验 议 计 ， 更 文 持 使 用 专门 放 计 工具 
Microsoft Expression Blend 进 行 专业 设计 ， 同 时 还 推出 了 以 模板 为 核心 
的 新 一 代 设 计 理 念 。 

本 章 我 们 就 一 同 来 领略 WPF 强 大 的 模板 功能 的 风采 。 


11.1 BT PR 


从 字面 上 看 ， 模 板 束 是 “上 其 有 一 定 规格 的 样板 ?， 有 有 了 模板 ， 整 可 以 
依照 它 制 造 很 多 一 样 的 实例 。 我 们 第 把 看 起 来 一 样 的 东西 称 为 “一 个 模 
mn ana ass FAI, WPFrH RRI PJ ifr Ease 4 ED 
刻 。 

Binding 和 基于 Binding 的 数据 驱动 界面 是 WPF 的 核心 部 分 ，WPF 最 
精彩 的 部 分 是 什么 呢 ? 依 我 看 ， 既 不 是 美 轮 美 负 的 3D 图 形 ， 也 不 是 烧 
丽 奔 目的 动画 ， 而 是 有 些 默默 无 闻 的 模板 (Template) . KEE, DE 
2D/3D22 Fe RU SJ] H th 5 i X N E rh ES Ge 

Template 完 竟 具 有 什么 能 力 使 得 它 在 WPF 体 系 中 获 此 殊 薪 昵 ? 这 还 
要 从 哲学 谈 起 ,“ 形 而 上 者 谓 之 道 ， 形 而 下 者 谓 之 器”， 这 人 句 话 出 自 《 另 
经 》， 大 意 是 说 在 我 们 能 够 观察 到 的 世间 万 物 的 形象 之 上 抽 和 象 的 结果 残 
是 思维 ， 而 形象 之 下 掩盖 的 则 是 其 本 质 。 显 然 ， 古 人 已 经 注意 到 “ 形 ” 古 
连接 本 质 与 思维 的 枢纽 ， 让 我 们 把 这 人 句 话 引入 计算 机 世界 。 

e “ 形 而 上 者 谓 之 道 ” 指 的 就 是 基于 现实 世界 对 万 物 进行 抽象 封 
装 、 理 顺 它 们 之 间 的 关系 ， 这 个 “ 道 ? 不 就 是 面 癌 对象 思想 吗 ! 如 果 把 面 
回 对 象 思想 进一步 提升 、 总 结 出 对 象 之 间 的 最 优 组 合 基 系 ,“ 道 ? 束 上 升 
为 设计 模式 思想 。 
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质 内 容 的 表现 形式 , “FABER REW ARSEN EA EY 8B 
一 对 矛盾 统一 体 。 

软件 开发 之 “着 ?并 非 本 书 研 究 的 主要 内 容 ， 本 书 研究 的 是 WPF。 
WPF 的 全 称 是 Windows Presentation Foundation，Presentation 一 词 的 意思 
束 是 外 观 、 呈 现 、 表 现 ， 也 就 是 说 ， 在 Windows GUI 程序 这 个 尺度 上 ， 
WPF 扮 演 的 束 是 “ 形 ” 的 角色 、 是 程序 的 外 在 “形式 ”， 而 程序 的 “内 容 ”* 仍 
然 是 由 数据 和 算法 构成 的 业务 馆 辑 。 与 WPF 类 似 ，Windows ”Forms 和 
ASP.NET 都 是 程序 内 容 的 表现 形式 ， 如 图 11-1 所 示 。 


WPF Win 
NET Form 
程序 逻辑 
ASPNET 


图 11-1 WPF 与 Windows Forms 和 ASP.NET 的 关系 


让 我 们 把 尺度 缩小 到 WPF 系 统 内 部 。 这 个 系统 与 程序 内 容 LAXE 
辑 ) 的 边界 是 Binding，Binding 把 数据 源源 不 断 地 从 程序 内 部 送出 来 、 
区 由 界面 元 系 来 显示 ， 叉 把 从 界面 元 系 收 集 来 的 数据 传送 回程 序 内 部 。 
界面 元 素 间 的 沟通 则 依靠 路 由 事件 来 完成 ， 有 时 候 路 由 事件 和 附加 事件 
也 会 参与 到 数据 的 传输 中 。 让 我 们 思考 一 个 问题 : WPF 作为 Windows 程 
序 的 表示 方式 ， 它 客 葛 在 表示 什么 ? 换 句 话说 ，WPE 作 为 一 种 “形式 ”， 
它 要 表现 的 “内 容 ” 完 葛 是 什么 ? BRE: 程序 的 数据 和 算法 Binding 
传递 的 是 数据 ， 事 件 参 数 携带 的 也 是 数据 ; 方法 和 委托 的 调用 是 算法 ， 
事件 传递 消息 也 是 算法 ..……… 数据 在 内 存 里 束 是 一 串 串 数字 或 字符 ， 算 法 
E. UT TONNES HEN 
He ? 

假如 想 表达 一 个 bool 类 型 数据 ， 同 时 还 想 表达 用 户 可 以 在 这 两 个 值 
之 间 目 由 切换 这 样 一 个 算法 ， 你 会 怎么 做 ?你 一 定 会 想到 使 用 一 个 
CheckBox 探 件 来 满足 要 求 ; 再 比如 两 色 值 实际 上 是 一 是 数 字 ， 而 用 户 
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现形 式 束 是 一 个 填充 着 员 实 两 色 的 色 块 ， 而 用 户 既 可 以 输入 值 又 可 以 用 
取 色 管 取 色 来 设置 斋 色 值 的 “算法 内 容 ” 恰 当 的 表达 方式 是 创建 一 个 
ColorPicker 控 件 。 相 信 你 已 经 有 发现， 控件 《Control) 是 数据 内 容 表 现形 
式 和 算法 内 容 表 现形 式 的 双重 载体 。 换 句 话 说 ， 探 件 既 是 数据 的 表现 形 
E 户 可 以 直观 地 看 到 数据 ， 又 是 算法 的 表现 形式 让 用 户 方便 地 操作 
Ha 

作为 “表现 形式 ”， 每 个 控件 都 是 为 了 实现 某 种 用 户 操 作 算法 和 和 直观 
显示 茶 种 数据 而 生 ， 一 个 控件 看 上 去 是 什么 样子 由 它 的 “算法 内 
容 ” 和 “数据 内 容 ” 决 定 ， 这 就 是 内 容 决 定形 式 。 这 里 ， 我 们 引入 两 个 概 


e 控件 的 “算法 内 容 ”: 指控 件 能 展示 哪些 数据 、 其 有 哪些 方法 、 
骨 啊 应 哪些 操作 、 能 激发 什么 事件 ， 人 简 而 言 之 束 是 控件 的 功能 ， 它 们 是 
一 组 相关 的 算法 馆 辑 。 

e 控件 的 “数据 内 容 ”: 控件 所 展示 的 其 体 数据 是 什么 。 

以 往 的 GUI 开发 技术 〈 如 Windows Forms#lASP.NET) 中 ， 控 件 内 
部 的 馆 辑 和 数据 是 固定 的 ， 程 序 员 不 能 改变 ; 对 于 控件 的 外 观 ， 程 序 员 
能 做 的 改变 也 非 营 有 限 ， 一 般 也 束 是 设置 控件 的 属性 ， 想 改变 控件 的 内 
部 结构 是 个 可 能 的 。 如 果 想 扩展 一 个 控件 的 功能 或 者 更 改 其 外 观 让 其 更 
适应 业务 多 辑 ， 哪 介 只 有 一 丁点 改变 ， 也 经 钊 需要 创建 控件 的 子 类 或 者 
创建 用 尸 控件 (UserControl〉。 造 成 这 个 局 面 的 根本 原因 整 是 数据 和 算 
法 的 “形式 ”与 <“ 内容” 炎 合 的 太 双 了 。 

在 WPF 中 ， 通 过 引入 模板 CTemplate) 微软 将 数据 和 算法 的 “内 
容 ” 与 “形式 ” 解 厢 了 。WPF 中 的 Template 分 为 两 大 类 : 

e ControlTemplate 古 算法 内 容 的 表现 形式 ， 一 个 控件 怎样 组 织 其 
内 部 结构 才能 让 它 更 符合 业务 迎 辑 、 让 用 户 操 作 起 来 更 舒服 束 是 由 它 来 
控制 的 。 它 决定 了 控件 “长 成 什么 样子 ”， 并 让 程序 员 有 有 机 会 在 控件 原 有 
HJ P SS dA E RB OIN. 

e DataTemplate 是 数据 内 容 的 表现 形式 ， 一 条 数据 显示 成 什么 样 
子 ， 是 简单 的 文本 还 是 直观 的 图 形 动 画 束 由 它 来 决定 。 

— Hil. Template “Sh 4«"———ControlTemplatezé 12 fF H3] JP 
衣 ，DataTemplate 是 数据 的 外 衣 。 

下 面 让 我 们 欣 蓉 两 个 例子 。 

WPF 中 的 控件 不 再 具有 国定 的 形象 ， 仅 仅 是 算法 内 容 或 数据 内 容 的 
载体 。 你 可 以 把 控件 理解 为 一 组 操作 所 辑 罕 上 了 一 矢 衣 服 ， 换 和 套 衣 服 它 
束 能 变 成 男 外 一 个 模样 。 你 看 到 的 控件 默认 形象 实际 上 就是 出 三 时 微软 


d 


> 
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eE —^ hA TRM RERA R UserControl? 实际 上 它 是 一 个 

ProgressBar 控 件 ， 只 是 我 们 的 设计 师 为 它 设 计 了 一 人 三 新 衣服 XEK 
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WPF 中 的 数据 显示 成 什么 样子 也 可 以 目 由 设 定 。 比 如 下 面 这 张 图 
中 ， 只 是 为 数据 条 月 准备 了 一 个 DataTemplate， 在 这 个 DataTemplate 中 


用 Binding 把 一 个 TextBlock 的 Text 属 性 关联 到 数据 对 象 的 Year 属 性 上 、 

把 一 个 Rectangle 的 Width 属 性 和 另 一 个 TextBlock 的 Text 属 性 都 关联 在 数 
据 对 象 的 Price 属 性 上， 并 使 用 StackPanel 和 Grid 对 这 几 个 控件 布局 。 一 
旦 应 用 这 个 DataTemplate， 单 调 的 数据 束 变 成 了 和 直观 的 柱状 图 ， 如 图 11- 
3 所 示 。 以 往 这 项 工作 不 但 需要 先 创 建 用 于 显示 数据 的 UserControl， 还 
要 为 UserControl 深 加 显示 / 回 写 数据 的 代 人 码 。 


B` DataTemplate 











图 11-3 DataTemplatezr {ři 


如 果 列 的 项 目 组 也 豆 欢 这 个 柱状 图 ， 你 要 做 的 事情 只 是 把 
DataTemplate 的 XAML 人 代码 发 给 他 们 。 它 的 代码 如 下 : 


<DataTemplate> 
«Grid» 
«StackPanel Orientation-" Horizontal"? 
«Gnd» 
«Rectangle Stroke" Yellow" Fill-"Orange" Width-" [Binding Price]" /> 
<TextBlock Text-" [Binding Year] " /> 
</Grid> 
<TextBlock Text=" [Binding Price] " Margin="$,0" /> 
</StackPanel> 
</Grid> 
</DataTemplate> 


我 想 ， 尺 管 你 还 没有 学 习 什 么 是 DataTemplate， 但 借 着 前 面 学 习 的 
基础 也 一 样 能 看 个 八 九 不 离 十 。 


11.2. ”数据 的 外 衣 DataTemplate 


“村 看 成 岭 侧 成 峰 ， 远 近 蜗 低 各 不 同 ”?， 庐 山 美 景 如 此 ， 数 据 义 何 笑 
不 是 这 样 呢 ?同样 一 条 数据 ， 比 如 上 共有 Id、Name、PhoneNumber、 
Address 等 属性 的 Student 实 例 ， 放 在 GridView 里 有 时 可 能 束 是 简单 的 文 
本 、 每 个 单元 格 只 显示 一 个 属性 ; 放 在 ListBox 里 有 时 为 了 避免 单调 可 
以 在 最 左 问 显示 64*64 的 头 保 ， 再 将 其 他 属性 分 两 行 排列 在 后 面 ;如果 
是 单独 显示 一 个 学 生 的 信息 则 可 以 用 类 似 简 历 的 复 条 格式 来 展现 学 生 的 
全 部 数据 。 一 样 的 内 容 可 以 用 不 同 的 形式 来 展现 ， 软 件 设 计 称 之 为 “ 数 
据 - 视 图 ”(Data-View) 模式 。 以 往 的 开发 技术 ， 如 MFC、Windows 
Forms、ASP.NET 等 ， 视 图 要 靠 UserControl 来 实现 ，WPF 不 但 支持 
UserControl 还 文 持 用 DataTemplate 为 数据 形成 视图 。 列 以 为 
DataTemplate 有 多 难 哦 ! 从 UserControl 升 级 到 DataTemplate 一 般 束 是 复 
制 、 烙 贴 一 下 再 改 几 个 字符 的 事 儿 。 

DataTemplate 吕 用 的 地 方 有 3 人 处， 分 别 是 : 

e ContentControl 的 ContentTemplate 必 性， 相当 于 给 ContentControl 
的 内 容 罕 衣服 。 

e ItemsControl 的 ItemTemplate 属 性 ， 相 当 于 给 ItemsControl 的 数据 
条 目 罕 衣服 。 

e GridViewColumn 的 CellTemplate 必 性， 相当 于 给 
GridViewColumn 蛙 元 格 里 的 数据 穿 衣服 。 

让 我 们 用 一 个 例子 对 比 UserControl 与 DataTemplate 的 使 用 。 例 子 实 
现 的 需求 是 这 样 的 :有 一 列 汽车 的 数据 ， 这 列 数据 显示 在 一 个 ListBox 
里 ， 要 求 ListBox 的 条 目 显 示 汽 车 的 厂商 图 标 和 简要 参数 ， 蛙 击 菜 个 条 
目 后 在 窗 体 的 评 细 内 容 区 域 显 示 汽 车 的 照 厂 和 详细 参数 。 

无 论 是 使 用 UserControl 还 是 DataTemplate， 广 商 的 Logo 和 汽车 的 照 
户 都 是 要 用 到 的 ， 所 以 驳 在 项 目 中 建立 资源 管理 目录 并 把 岁 片 添加 进 
来 。Logo 的 文件 名 与 乒 商 名 称 一 致 ， 照 卢 的 文件 名 则 与 车 名 一 致 。 组 织 
结构 如 图 11-4 所 示 。 
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图 11-4 ”资源 管理 目录 的 组 织 结 构图 
首先 创建 Car 数 据 类 型 . 


public class Car 
| 
public string Automaker { get; set; } 
public string Name | get; set; | 
publie string Year | get; set; | 
public string TopSpeed | get; set; | 
| 
为 了 在 ListBox 里 显示 Car 类 型 数据 ， 我 们 需要 准备 一 个 
UserControl， 命 名 为 CarListItemView。 这 个 UserControl 由 一 个 Car 类 型 
实例 在 背后 支持 ， 当 设置 这 个 实例 的 时 候 ， 界 和 面 元 系 将 实例 的 属性 值 显 
示 在 各 个 控件 里 。CarListItemView 的 XAML 部 分 代码 如 下 : 


<UserControl x:Class-" WpfApplicationl .CarListltemView' 
xmlns-"http://schemas.microsoft.com winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
«Grid Margin-"2"» 
«StackPanel Orientation-" Horizontal"? 
«]mage x:Name-" imageLogo" Grid.RowSpan-" 3" Width-"64" Height-"64" /> 
«StackPane! Margin-"5, 10" 
<TextBlock x:Name-"textBlockName" FontSize-" 16" FontWeight-"Bold" /> 
<TextBlock x:Name-"textBlockYear" FontSize-" 4" /> 
«/StackPanel^ 
</StackPanel> 
</Grid> 


</UserControl> 


CarListItemView 用 于 支持 前 台 显 示 的 属性 C# 代 人 码 如 下 : 


private Car car; 


public Car Car 


get | return car; | 


sel 
i 
car = value: 
this.textBlockName, Text = car. Name: 
this.textBlock Year. Text = car. Year; 
string Urlstr = string. Format((a" /Resources/Logos/10].png". car.Automaker): 
this.imageLogo.Source = new Bitmaplmage(new Uri(uriStr, UriKind. Relative); 
| 


类 似 的 原理 ， 我 们 需要 为 Car 类 型 数据 准备 一 个 详细 信息 的 视图 。 
UserControl 名 称 为 CarDetailView，XAML 部 分 代码 如 下 : 


<UserControl x:Class-"WpfApplicationl .CarDetail View" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/wintx/2006/xam]"» 
«Border BorderBrush-" Black" BorderThickness-" |" ComerRadius="6"> 
«StackPanel Margin="5"> 
«[mage x: Name-"imagePhoto" Width-" 400" Height-"250" /> 
«StackPanel Orientation-" Horizontal" Margin="5,0"> 
<TextBlock Text-"Name:" FontWeight-" Bold" FontSize- 20" /> 
<TextBlock x:Name-" textBlockName" FontSize-"20" Margin-"5,0" /> 
«/StackPanel^ 
«StackPanel Orientation-" Horizontal" Margin="5,0"> 
<TextBlock Text-" Automaker;" FontWeight-"Bold" /> 
<TextBlock x:Name-"textBlockAutomaker" Margin- 5,0" /> 
<TextBlock Text-"Year:" FontWeight-"Bold" /> 
<TextBlock x:Name-"textBlockYear" Margin" 5,0" /> 
<TextBlock Text-" Top Speed:" FontWeight-"Bold" /> 
<TextBlock x:Name= textBlock TopSpeed" Margin- "5,0" > 
</StackPanel> 
</StackPanel> 
</Border> 
</UserControl> 
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private Car car; 


public Car Car 
| 
get | return car; j 
set 
| 
car = value: 
this.textBlockName. Text = car. Name; 
this.textBlock Year. Text = car. Year; 
this.textBlock TopSpeed. Text = car. TopSpeed; 
this.textBlockAutomaker. Text = car.Automaker: 
string uri8tr = string.Format((@"/Resources/Images/ {0}. Jpg", car.Name); 
this.imagePhoto.Source = new Bitmaplmape(new Uri(uriStr, UriKind.Relative)): 
| 


最 后 把 它们 组 闻 到 主 窗 体 上 : 


«Window x:Class-"WpfApplicationl. Window" 
xmins-"http://schemas.microsoft.com/winx/2006/xaml/presentation" 
xmlns:x-"http://schemas.mierosoft.com/winfx/2006/xaml" 
xmlns:local-"clr-namespace: Wpf Application] " 

Height-"350" Width-"623" Title="UserControl"> 
sStackPanel Orientation-"Horizontal" Margin-"5"» 
x]ocal:CarDetailView x: Name-"detailView" /> 
<ListBox x:Name-"listBoxCars" Width-"180" Margin-"5,0" 
SelectionChanged-"listBoxCars. SelectionChanged" /> 
«/StackPanel 
«Window 


BEAJ BAA P: 


public partial class Window] : Window 


| 


Il 构造 器 
public Window1l) 


Í 

t 
InitializeComponent(); 
Initial CarList():; 


省 初始 化 ListBox 
private void InitialCarList() 


| 
List<Car> carList = new List<Car>() 
i 
new Car(){ Automaker-" Lamborghini", Name="Diablo", Year="1990", TopSpeed= 34( |， 
new Car()! Automaker="Lamborghini", Name-"Murcielago", Year="2001", TopSpeed="353"}, 
new Car()! Automaker=" Lamborghini", Name-"Gallardo", Year="2003",  TopSpeed="325"}, 
new Car()! Automaker-" Lamborghini", Name-"Reventon", Year-"2008", TopSpeed="356"}, 
h 
foreach (Car car in carList) 
| 
CarListltemView view = new CarListltemView(): 
vlew.Car = car: 
this.listBoxCars.Items.Add(view); 
| 
| 


省 选项 变化 事件 的 处 理 器 


private void listBoxCars. SelectionChanged(object sender, SelectionChangedEventArgs e) 


| 
CarListltemView view = e.Addedltems[0] as CarListItemView; 
if (view != null) 
i 
this.detatlView.Car = view.Car; 
| 
! 


运行 程序 并 单 击 ListBox 里 的 和 条目， 效果 如 图 11-5 所 示 。 


B ' UserControl 
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图 11-5 “运行 效果 


很 难说 这 样 做 是 错 有 的， 但 在 WPF 里 如 此 实现 需求 真是 浪费 了 数据 驱 
动 寞 面 这 一 重要 功能 。 我 们 向 说 的 “把 WPF 当 作 Windows Forms 来 用 ” 指 
的 束 是 这 种 实现 方法 。 这 种 方法 对 WPF 最 大 的 曲解 在 于 没有 借助 
Binding 实 现 数据 驱动 界面 ， 并 且 认 为 ListBox.Items 属 性 里 放置 的 是 控件 
这 种 曲解 迫使 数据 在 界面 元 系 间 交换 并 有 日 程序 员 只 能 使 用 事件 驱动 
方式 来 实现 逻辑 程序 员 必 须 信 助 处 理 ListBox 上 的 SelectionChanged 事 
件 来 推动 CarDetailView 来 显示 数据 ， 而 数据 又 是 由 CarListItemView 控 件 
转交 给 CarDetailView 控 件 的 ， 之 间 还 做 了 一 次 类 型 转换 。 图 11-6 用 于 说 
明 目 前 的 事件 驱动 模式 与 期 户 中 数据 驱动 界面 模式 的 不 同 : 











事件 驱动 数据 驱动 
图 11-6 ”事件 驱动 模式 与 数据 驱动 模式 的 区 别 


显然 ， 事 件 驱 动 是 控件 和 控件 之 则 沟通 或 者 说 是 形式 与 形式 之 间 有 风 
沟通 ， 数 据 驱 动 则 是 数据 与 控件 之 则 的 沟通 、 是 内 容 决 定形 式 。 使 用 
DataTemplate 束 可 以 很 方便 地 把 事件 驱动 模式 升级 为 数据 驱动 檬 式 。 

你 是 不 是 在 担心 前 面 号 的 代码 会 被 删 挥 呢 ? 不 会 的 ! 由 UserControl 
升级 为 DataTemplate 时 90% 的 代码 可 以 原样 找 贝 ， 为 10% 可 以 放心 删 
除 ， 再 做 一 点 点 改 动 束 可 以 了 。 让 我 们 开始 吧 ! 

首先 把 两 个 UserControl 的 “ 心 ”一 切 出 来 ， 用 <DataTemplate> 标 签 包 
装 ， 再 放 进 主 窗 体 的 资源 词典 里 。 最 重要 的 一 点 是 为 DataTemplate 里 的 
每 个 控件 设置 Binding， 告 诉 各 个 控件 应 该 天 注 数 据 的 哪个 属性 。 因 为 
使 用 Binding 在 控件 与 数据 间 建 立 关 联 ， 人 免 去 了 在 C# 代 人 码 中 访问 界面 元 
E WBrEAXAMLAVRS FBBIEAXUx:Namezin] LA Pa, RBA bbs) ys 

`Z) 5 

有 些 属性 的 值 不 能 直接 拿 来 用 ， 比 如 汽车 的 厂商 和 名 称 不 能 直接 拿 
来 作为 图 片 的 路 径 ， 这 时 就 要 使 用 Converter。 有 两 种 办 法 可 以 在 XAML 
代码 中 使 用 Converter: 

e 把 Converter 以 资源 的 形式 放 在 资源 词典 里 (本 例 使 用 的 方 
1239 4 

e 为 Converter 准 备 一 个 表态 属性 ， 形 成 日 件 模式 ， 在 XAML 代 码 
里 使 用 {x:Static} 标 签 扩展 来 访问 。 

我 们 的 两 个 Converter 代 码 如 下 : 


IH 厂商 和 名称 交换 为 Logo 图 片 路 径 
public class AutomakerToLogoPathConverter : IValueConverter 
| 
I| JE] 
public object Convert(object value, Type target Type, object parameter, CultureInfo culture) 
| 
string uriStr = string.Format((a"/Resources/Logos/ 10] png", (string)value); 


retum new BitmapImage(new Uri(uriStr, Urikind.Relative)); 


路 未 被 用 到 
public object ConvertBack(object value, Type target Type, object parameter, CultureInfo culture) 
í 


throw new NotImplementedException(); 


I| TUE Aha a FEE 
public class NameToPhotoPathConverter : I[ValueConverter 


| 
I 正 向 转换 
public object Convert(object value, Type target Type, object parameter, Culturelnfo culture) 
| 
string uriStr = string.Format((a" /Resources/Images/ [0] pg", (string)value); 


retum new BitmapImage(new Uri(uriStr, UriKind. Relative)); 


I] WH 
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
| 


throw new NotImplementedException( ); 


A f 3X W^ ConverterZ Ji gë /[ 1395 nj ELA V TT DataTemplate ~ fi fs 
整 的 XAML 代 码 如 下 : 


<Window x:Class-"WpfApplication]. Window 1" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: WpfApplication]" Height-"350" Width" 623" 
Title=" Data Template "> 

<Window. Resources> 
<|--Converters--> 
<local:AutomakerToLogoPathConverter x:Key="a2]" /> 
<local:NameToPhotoPathConverter x:Key="n2p" /> 
<l--DataTemplate for Detail View--> 
<DataTemplate x:Key="carDetailView Template" > 
«Border BorderBrush="Black" BorderThickness-" |" CornerRadius="6"> 
«StackPanel Margin-" 3 > 
«Image Width-" 400" Height" 230" 
Sourcez" [Binding Name, Converterz[StaticResource n2p]]" > 
«StackPanel Orientation-" Horizontal" Margin="5,0"> 
<TextBlock Text-"Name:" FontWeight-" Bold" FontSize-"20" /> 
<TextBlock Textz" [Binding Namej" FontSize-"20" Margin- "5,0" /> 
«/StackPanel^ 
<StackPanel Orientation-" Horizontal" Margin-"5,0"» 
<TextBlock Text-" Automaker:" FontWeight-" Bold" /> 
<TextBlock Textz" [Binding Automaker]" Margin-" 5,0" /> 
<TextBlock [ext= Year FontWeight-" Bold" /> 
<TextBlock Textz" [Binding Year)" Margin-"5,0" /> 
<TextBlock Text-" Top speed FontWeight-" Bold" /> 
<TextBlock Textz" [Binding TopSpeed]" Margin-" 5,0" [> 
«/StackPanel» 
</StackPanel> 
</Border> 
«JDataTemplate? 


<l--DataTemplate for Item View--> 
<Data Template x: Keys" carListItemView Template" > 
«Grid Margin-"?"» 
«StackPanel Orientation-" Horizontal"? 
«Image Source= "(Binding Automaker, Converter={Static Resource a21]]" 
Grid. RowSpan-" 3" Width-"64" Height" 64" > 
«StackPanel Margin" 5,107 
<TextBlock Textz" [Binding Name]" FontSize-"16" FontWeight-" Bold" /> 
<TextBlock Textz" [Binding Year)" FontSize-" 14" /> 
</StackPanel> 
</StackPanel> 
</Grid> 
</DataTemplate> 
</Window. Resources> 
<|-- 窗 体 的 内 容 --> 
«StackPanel Orientation= Horizontal" Margin="5"> 
<UserControl ContentTemplatez" [StaticResource carDetailView Template] " 
Lontent= [Binding SelectedItem, FlementNamezlistBoxCars]" /> 
«ListBox x:Name-"listBoxCars" Width-" 180" Margin-" 5.0" 


ItemTemplatez"[StaticResource carListItemViewTemplate]" /> 


</StackPanel> 
«Window? 
代码 对 于 初学 者 稍微 长 了 点 但 结构 非常 简单 。 其 中 最 重要 的 两 名 
Ei 
xE: 


e ContentTemplate-"(StaticResource carDetailViewTemplate}", +H 
当 于 给 一 个 普通 UserControl 的 数据 内 容 容 上 一 件 外 衣 、 让 Car 类 型 数据 
以 图 文 并 所 的 形式 展现 出 来 。 这 件 外 衣 束 是 以 
x:Key="carDetailViewTemplate" 标 记 的 DataTemplate 资 源 。 

e ItemTemplate-"(StaticResource carListItemViewTemplate}", 十 
把 一 件数 据 的 外 衣 交 给 ListBox， 当 ListBox.ItemsSource 被 赋值 时 ， 
ListBox 会 为 每 个 条 目 穿 上 这 件 外 衣 。 这 件 外 衣 是 以 
X:Key="carListItemViewTemplate" 标 记 的 DataTemplate 资 源 。 

因为 不 再 使 用 事件 驱动 ， 而 且 给 数据 罕 衣 服 的 事 儿 也 已 目 动 完成 ， 


所 以 后 台 的 C# 代 码 就 非常 简单 了 。 窗 体 的 C# 代 码 就 只 剩 下 这 些 ; 


public partial class Window] : Window 


| 
l 


I| fois 
public Window) 


| 
l 


[nitializeComponentií(): 
Initial CarList( ); 
| 


I| 初始 化 ListBox 
private void InitialCarList() 
| 


List<Car> carList = new ListzCar?() 

| 
new Car()/ Automaker-" Lamborghini", Name-" Diablo", Year" 1990", — Topspeed- 340" ], 
new Car()! Automaker-" Lamborghini", Name-"Murcielago", Year-"2001", — TopSpeed-"353"!, 
new Can)! Automaker-" Lamborghini", Name-" Gallardo", Year- 2003", — TopSpeed- 325" ], 


new Car()] Automaker-" Lamborghini", Name-"Reventon", Year-" 2008", — TopSpeed- 356 |, 


m 
E 


I| RIA 


this.listBoxCars.ItemsSource = carList: 


运行 程序 ， 效 果 如 图 11-7 所 示 ， 与 先前 使 用 UserControl 实 现 的 没有 
任何 区 列 。 用 户 永 远 不 会 知道 程序 员 在 后 侣 使 用 了 什么 样 的 技术 与 模 
式 ， 但 作为 程序 员 ， 我 们 可 以 清楚 地 体会 到 使 用 DataTemplate 可 以 让 程 
序 结 构 更 清晰 、 代 但 更 商洛、 维护 更 方便 。 不 伟 张 地 说 ， 和 是 
DataTemplate 帮 助 彻 搬 完成 了 “数据 驱动 寞 面 "， 让 Binding 和 数据 关联 渗 
透 到 用 户 界 面 的 每 一 个 细胞 中 。 


DataTemplate 





Murcielago 


2001 


Gallardo 
2003 





Reventon 
2008 


Name: Murclelago 
Automaker: Lamborghini Year: 2001 Top Speed: 353 





图 11-7 使 用 DataTemplate 后 的 运行 效果 
11.3 ”控件 的 外 衣 ControlTemplate 


每 每 提 到 ControlIemplate， 我 都 会 想起 “ 扳 看 诗 及 的 猥 ” 这 人 句 话 
披 上 斑 及 之 后 ， 昌 然 看 上 去 像 是 只 平 ， 但 其 行为 仍然 是 巨 猥 。 儿 的 行为 
指 的 古 它 会 做 吃 别 的 动物 、 对 看 满月 吧 叫 等 事情 ， 控 件 也 有 目 己 的 行 
为 ， 比 如 显示 数据 、 执 行 方法 、 激 上 友 事 件 等 。 控 件 的 行为 要 苇 编 程 馆 辑 
来 实现 ， 所 以 也 可 把 控件 的 行为 称 为 控件 的 算法 内 容 。 举 个 例子 ，WPF 
中 的 CheckBox 与 其 基 类 ToggleButton 在 功能 上 几乎 完全 一 样 ， 但 外 观 上 
区 别 却 非常 大 ， 这 就 是 更 换 ControlTemplate 的 结果 。 经 过 更 换 
ControlTemplate， 我 们 不 但 可 以 制作 出 披 看 CheckBox 外 衣 的 
ToggleButton， 还 能 制作 出 披 着 温度 计 外 衣 的 ProgressBar 控 件 。 


VY A 
LE 








实际 项 目 中 ，ControlTemplate 主 要 有 两 大 用 武之 地 : 

e 通过 更 换 ControlTemplate 改 变 探 件 外 观 ， 使 之 具有 更 优 的 用 户 使 用 体验 及 外 观 。 

e 信 助 ControlTemplate， 程 序 员 与 设计 师 可 以 并 行 工作 ， 程 序 员 可 以 和 多 用 WPF 标 准 控件 
进行 编程 ， 等 设计 师 的 工作 完成 后 ， 只 需 把 新 的 ControlTemplate 应 用 到 程序 中 残 可 以 了 。 


较 之 传统 GUI 开 肥 ， 这 两 所 都 能 极 大 地 所 局 工作 效率 。 第 一 点 让 程 
序 更 换 皮 肤 变 得 非 营 容易 ， 第 二 点 则 解决 了 团队 分 工 与 合作 的 问题 。 比 
如 程序 员 A 在 开 友 一 个 物理 实验 仿真 程 厅 时 需要 一 个 温度 计 组 件 ， 他 请 





程序 员 B 来 制作 这 个 组 件 ， 程 序 员 B 和 设计 师 C 共 同 完成 组 件 开 发 。A 可 
以 要 求 B 在 实现 这 个 组 件 时 又 器 的 接口 与 ProgressBar 保 持 一 八 并 先 用 
ProgressBar 巷 代 ， 这 和 需要 B 使 用 装饰 者 模式 小 心 编程 ，A 还 要 冒 点 小 风 
Ko HBM O -ProgressBar HA, B FRF RRR T 
(BRIF mE RH ARTES H, 5A Ll Z R 

T) 。A 也 可 以 不 要 求 B 一 定 按照 ProgressBar 的 接口 来 编程 ，A 可 以 先 去 
写 别 的 部 分 ， 等 B 的 工作 完成 后 再 读 一 读 狐 控件 的 文档 然后 继续 这 部 分 
工作 ， 而 实际 工作 中 ， 有 没有 文档 是 一 回 事 ， 读 别人 的 文档 或 代码 本 号 
束 挺 浪费 时 间 。 使 用 ControlTemplate 情 况 会 好 很 多 ，A 可 以 直接 用 
ProgressBar、 读 看 MSDN 文 档 来 编程 ， 并 请 设计 师 C 来 完成 一 个 让 
ProgressBar A té 2K [4 3e] im W HJ Control Template, CHI ETE FERKA R 
需要 把 一 段 XAML 代 码 捞 册 到 程序 中 并 应 用 新 的 ControlTemplate， 工 作 
项 完成 了 A A. d. $7). E. 

如 何 为 控件 设计 ControlTemplate 呢 ? 首先 需要 你 了 解 每 个 控件 的 内 
部 结构 。 你 可 能 会 问 :“ 在 哪儿 可 以 得 到 控件 的 内 部 结构 呢 ? ”。 没 有 文 
档 可 租 ， 想 知道 一 个 控件 的 内 部 结构 殉 必 须 把 控件 “ 打 雁 ”了 看 一 看 。 用 
于 打 雁 控件 、 答 看 内 部 结构 的 工 共 了 驶 是 Microsoft Expression 2& H fJ 
Blend, H BU ETHICS e Blend 3.0. 


11.3.1 Jü J FAIN 


PRH TAXIS, UDISTEU 49 2 Z8 Tf Pi J AT TextBox 
füButtonZmíR]E., dl APT IRF. JeíirBlend, #r#Ë— "WPF 
项 目 (或 者 打开 一 个 由 VS 2008 创 建 的 WPF 项 目 ) ， 先 把 窗 体 的 育 景 
改 为 线性 渐变 ， 再 在 窗 体 的 主 容 器 Grid 里 男 上 两 个 TextBox 和 一 个 
Button。 对 于 程序 员 来 说 ， 完 全 可 以 把 Blend 理 解 为 一 个 功能 更 强大 的 窗 
体 设 计 器 ， 而 对 于 设计 师 来 说 ， 可 以 把 Blend 理 解 为 会 与 XAML 代 人 码 的 
Photoshop 或 Fireworks。 程 序 运行 效 末 如 图 11-8 所 示 。 











图 11-8 ”运行 效果 
现在 的 TextBox 方 方正 正 、 有 杨 有 角 ， 与 窗 体 和 Button 的 圆 角 风格 
不 太 协 调 ， 怎 样 让 它 的 边框 变 为 圆 角 窍 形 呢 ? 传统 的 方法 可 能 是 创建 一 
个 UserControl 并 在 TextBox 外 套 上 一 个 Border， 然 后 还 要 声明 一 些 属性 
和 方法 又 露 封 装 在 UserControl] 里 的 TextBox 上。 我 们 的 办 法 是 在 TextBox 
上 右 击 ， 在 弹出 末 蛙 中 选择 Edit Template 2 Edit a Copy...， 如 图 11-9 所 
Z]S ° 


Make Into UserControl.. 
Make Into Control... 


Edit Template 


Edit Additional Templates Edit a Copy... 
Create Empty... 








图 11-9 ”打开 菜单 


之 所 以 不 选择 Create Empty 是 因为 Create Empty 是 从 头 开 始 设计 一 个 
控件 的 ControlTemplate， 新 做 衣服 哪 如 改 衣 服 快 呀 ! 单 击 有 来 单项 后 弹出 
资源 对 话 框 ， 尽 管 可 以 用 C# 人 代码 来 创建 ControlTemplate， 但 绝 大 多 数 情 
i'i F ControlTemplatezé H1 XAML4V 22685; B] JEJUCE Vx Ji ie] JL HR, rA 
会 弹出 对 话 框 询 问 你 资源 的 XKey 是 什么 、 打 算 把 资源 放 在 哪里 。 作 为 
资源 ，ControlTemplate 可 以 放 在 三 个 地 方 : Application 的 资源 词典 里 、 

东 个 界面 元 又 的 资源 词典 里 ， 或 者 放 在 外 部 XAML 文 件 中 《请 大 家 回顾 


第 10 章 ) 。 我 们 选择 把 它 放 在 Application 的 资源 词典 里 以 便 统一 管理 ， 
并 命名 为 RoundCornerTextBoxStyle， 如 图 11-10 所 示 。 


Create Style Resource 


@ RoundComerTextBoxStyle 


Apply to all 
* Applicaton 


This document Window: Window 





图 11-10 ”资源 对 话 框 


单 击 OK 按钮 便 进入 了 控件 的 模板 的 编辑 状态 。 在 Objects and 
Timeline 面 板 中 观察 已 经 解剖 开 的 TextBox 控 件 ， 发 现 它 是 由 一 个 名 为 
Bd 的 ListBoxChrome 套 着 一 个 名 为 PART ContentHost 的 ScrollViewer 组 成 
的 〈 如 图 11-11 所 示 ) 。 为 了 时 示 圆 角 窍 形 边 框 ， 我 们 只 需要 把 最 外 层 
的 ListBoxChrome 换 成 Border、 删 挥 Border 不 具备 的 属性 值 、 设 置 它 的 
AINEEN uJ. 


Objects and Timeline 


E Round ornerTextBox5tyle (TextBox Template) 


By + Template 
T © Bg 
E? PART ContentHost 





图 11-11 模板 的 编辑 状态 
更改 后 的 核心 代码 如 下 : 


«Style x: Key-"RoundCornerTextBoxStyle" BasedOn=" [x:Null]" TargetType-" |x:Type TextBox}"> 
«Setter Propertyz" Template" 
«Setter. Value 
«ControlTemplate Target Type" x Type TextBox > 
«Border x:Name-"Bd" SnapsToDevicePixels-"true" 
Background-" | TemplateBinding Background]" 
BorderBrush-" | TemplateBinding BorderBrushj " 
BorderThickness-" | TemplateBinding BorderThickness; " 
CornerRadiusz" 5" 
«Scroll Viewer x: Name-"PART ContentHost" 
SnapsToDevicePixels-" | TemplateBinding SnapsToDevicePixels]" /> 
«/Border» 
z1--Template 的 其 他 内 容 --> 
</ControlTemplate> 
</Setter.Value> 
</Setter> 
<l-- B Setter--> 
</Style> 


这 段 代码 有 如 下 几 个 看 点 : 

看 点 一 ， 作 为 资源 的 不 是 日 纯 的 ControlIemplate 而 是 Style， 说 古 编 
辑 ControlTemplate 但 实际 上 是 把 ControlTemplate 包 含 在 Style 里 ， 不 知道 
微软 以 后 会 不 会 更 正 这 个 小 麻烦 。Style 是 什么 呢 ? 简单 讲 就 是 一 组 
<Setter>， 也 就 是 一 组 属性 设置 器 。 回 想 一 下 Windows ”Forms 编 程 的 时 
候 ， 窗 体 设 计 需 不 是 能 生成 这 样 的 代码 吗 : 


private void InitializeComponent() 


|i textBoxl 

this.textBox l.Location = new System. Drawing.Point(12, 12); 
this.textBox |. Name = "textBox ^; 

this.textBox].Size = new System.Drawing.Size( 100, 20); 
this.textBox 1 TabIndex = 0; 


// button] 

this.buttonl.Location = new System.Drawing.Point( 12, 38); 
this. button. Name = "button]": 

this.button1.Size = new System.Drawing.Size( 100, 23); 
this.button1.Tablndex = 1; 

this.button], Text = "buttonl"; 


H 
[i 
pier 


同样 的 逻辑 如 果 在 XAML 里 出 现 就 变 成 了 这 样 : 


«Style» 
«Setter Property-"pNamel" Value-" value" /> 
«Setter Property-"pName2" Value-" value" /> 
«Setter Property="pName3"> 
«Setter. Value 
<l--Object Value--> 
«Setter. Value 
«Setter? 
«Setter Property="pName4"> 
«Setter. Value 
<l--Object Value--> 
«jSetter. Value 
«Setter 


</style> 


使 用 Style 时 ， 如 果 Value 的 值 比较 简单 ， 那 融和 直接 用 Attribute 值 来 表 
示 ， 如 采 Value 值 不 能 用 一 个 窗 单 的 字符 串 摘 述 吏 需 要 使 用 XAML 的 属 
性 对 象 语 法 。 例 子 中 ，TextBox 的 Template 属 性 是 一 个 ControlTemplate 对 
象 ， 如 此 复杂 的 全 只 能 使 用 属性 对 象 语法 来 描述 。 对 于 Style， 后 面 会 有 
专门 的 章节 来 介绍 。 

看 点 二 ， 直 接 将 原来 的 ListBoxChrome 标 签 蔡 换 成 了 Border 标 签 ， 
去 挥 Border 个 具备 的 属性 并 洪 加 f CornerRadius-"5". 

看 点 二 ，TemplateBinding。ControlITemplate 最 终 将 被 应 用 到 一 个 控 
件 上 ， 我 们 称 这 个 控件 为 模板 目标 控件 或 模板 化 控件 (Templated 
Control) ，ControlTemplate 里 的 控件 可 以 使 用 TemplateBinding 将 目 己 的 
属性 值 关 联 在 目标 控件 的 茶 个 属性 值 上 ， 必 要 的 时 候 还 可 以 添加 
Converter。 例 如 Background="{TemplateBinding Background} xfj, $ 
思 是 让 Border 的 Background 与 模板 目标 控件 你 持 一 改 ， 产 生 的 效果 就 是 
你 为 模板 的 目标 控件 设置 Background 属 性 ，Border 的 Background 也 会 跟 
HAE. |HBüBindingEt 8, ff X TemplateBindingH'] ZJB& 5; (Binding 
RelativeSource- ( RelativeSource TemplatedParent] ) — $X , 


好 了 ! 把 我 们 设计 的 圆 角 Style 应 用 到 两 个 TextBox 上 ， 代 人 码 如 下 : 


«Window xmlins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.mierosoft.com/winfx/2006/xaml" 
x:Class-"WpfApplicationl.MainWindow" — Title-"ControlTemplate" 
Width-"270" Height-"180"» 

«Window.Background? 

«LinearGradientBrush EndPoint-"0.5, 1" StartPoint-" 0.5.0" 
«GradientStop Color= 4FFOOBOFF" Offset-"0" /> 
«GradientStop Color-" White" Offset-" |" /> 

«/LinearGradientBrush? 

zWindow.Backeround? 
«StackPanel? 
<TextBox Stylez"[DynamicResource RoundCorner TextBoxStyle]" 
Height-"30" — Margin-" 10" BorderBrush- "Black" /> 
«TextBox Stylez"[DynamicResource RoundCorner TextBoxStyle]" 
Height-"30" — Margin-" 10,0" BorderBrush-"Black" /> 
«Button Width-"130" Height-" 30" Content-"Button" Margin" 10" /> 
«/StackPanel- 
«Window? 


程序 的 运行 效果 如 图 11-12 所 示 。 是 不 是 感觉 圆 角 的 TextBox 更 和 谐 
呢 ? 











以 同样 的 方法 “ 打 雄 ”Button， 你 会 发 现 Button 的 内 部 结构 与 TextBox 
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之 ProgressBarStyle (ProgressBar Template) 
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图 11-13 ”ProgressBar 的 内 容 结构 


在 Blend 里 你 可 以 通过 控件 后 面 的 “眼睛 ”图 标 控制 控件 的 显 隐 ， 这 
样 就 能 区 分 出 每 个 子 控件 的 用 途 ， 这 也 是 学 习 控 件 设计 的 好 方法 。 如 果 
想 把 这 个 ProgressBar 改 造成 一 个 温 上 度 计 ， 只 需要 在 此 基础 上 添加 一 个 至 


景 、 更 改进 上 度 指 示 咒 控件 的 前 景色 、 上 再 在 合适 的 控件 外 面 僚 上 一 个 画 出 
刻度 的 Grid (刻度 可 以 根据 要 求 计算 出 来 也 可 以 是 国定 的 )。 

不 知 大 家 意识 到 没有 ， 其 实 每 个 控件 本 里 就 是 一 棵 UI 元 素 树 。WPF 
时 UI 元 际 可 以 看 作 两 棵 树 LogicalTree 和 VisualTree， 这 两 棵 树 的 交 
上 已 就 是 ControlIemplate。 如 果 把 界面 上 的 控件 元 双 看 作 是 一 个 结 点 ， 那 
元 系 们 构成 的 束 是 LogicalIree， 如 果 把 控件 内 部 由 ControlITemplate 生 成 
的 控件 也 算 上 ， 那 构成 的 就 是 VisualTree。 换 句 话说 ， 在 LogicalTree F 
导航 不 会 进入 到 控件 内 部 ， 而 在 VisualTree 上 导航 则 可 检索 到 控件 内 部 
由 ControlTemplate 生 成 的 子 级 控件 。 





11.3.2 ItemsControlH]PanelTemplate 


ItemsControl 具 有 一 个 名 为 ItemsPanel 的 属性 ， 它 的 数据 类 型 为 
ItemsPanelTemplate。ItemsPanelTemplate 也 是 一 种 控件 Template， 它 的 
作用 就 是 让 程序 员 有 机 会 控制 ItemsControl 的 条 日 容器 。 

举例 而 言 ， 我 们 的 印象 中 ListBox 中 的 条 目 都 是 自 上 而 下 排列 的 ， 

如 有 末 客 户 要 求 我 们 制作 一 个 条 目 水 平 排列 的 ListBox 怎 么 办 昵 ? WPF 之 
前 ， 我 们 只 能 重 写 控件 比较 后 层 的 方法 和 属性 ， 而 现在 我 们 只 需要 调整 
ListBox 的 ItemsPanel 属 性。 请 看 下 面 的 代 伍 。 

这 是 一 个 没有 经 过 调整 的 ListBox， 条 目 纵 加 排列 。 


«Gnd Margin= 0 > 
<ListBox> 
<TextBlock Text-" Allan" /> 
<TextBlock [ext= Kevin" /> 
<TextBlock Text-" Drew" /> 
<TextBlock Text-" Timothy" /> 
< ListBox> 
«nd» 


LR BOE S SE UY ku FE: 


«Gnd Margin= 0 > 
<ListBox> 
«1--[temsPanel--» 
«ListBox.ItemsPanel» 
«ItemsPanel Template? 
«StackPanel Orientationz" Horizontal" /> 
«JItemsPanelTemplate» 
«[ListBox.ItemsPanel» 
< 上 日- 
<TextBlock Text-" Allan" /> 
<TextBlock Text="Kevin" /> 
<TextBlock Text= Drew" /> 
<TextBlock Text="Timothy" /> 
</ListBox> 
<JGnd> 
条 目 就 会 包装 在 一 个 水 平 排列 的 StackPanel 中 ， 从 而 村 问 排 列 ， 如 
图 11-14 所 示 。 


| ListBox ItemsPanel 


ListBox ItemsPanel 


Allan euntem Timothy 








图 11-14 条 目 水 平 排列 的 ListBox 效 宋 
11.4 DataTemplate 与 ControlTemplate 的 关系 与 应 用 


11.4.1 DataTemplate 与 ControlTemplate 的 关系 


学 习 过 DataTemplate 和 ControlTemplate， 你 应 该 已 经 体会 到 ， 控 件 
只 是 个 数据 和 行为 的 载体 、 是 个 抽象 的 概念 ， 人 至 于 它 本 里 会 长 成 什么 样 
子 〈 控 件 内 部 结构 )、 它 的 数据 会 长 成 什么 样子 (数据 显示 结构 〉 部 是 
罪 Template 生 成 的 。 决 定 控 件 外 观 的 是 ControlTemplate， 决 定数 据 外 观 
的 是 DataTemplate， 它 们 正 是 Control 类 的 Template 和 ContentTemplate 两 


个 属性 的 值 。 它 们 的 作用 范围 如 图 11-15 所 示 。 


ControlTemplate 
[E H] GERI 









控件 本 号 
(包括 内 容 区 域 ) 





DataTemplate 
作用 范围 





图 11-15 ”作用 范围 多 


几 是 Template， 最 终 避 是 要 作用 在 控件 上 有 的， 这 个 控件 束 是 
Template 的 目标 控件 ， 也 叫 模板 化 控件 〈Templated Control〉。 你 可 能 
会 问 : “DataTemplate 的 目标 应 该 是 数据 呀 ， 怎 么 会 古 控 
fF? ”DataTemplate 给 入 的 感 关 的 确 是 施加 在 了 数据 对 象 上 ， 但 施加 在 数 
据 对 象 上 生成 的 一 组 控件 总 得 有 个 载体 吧 ? 这 个 载体 一 般 是 洲 实 在 一 个 
ContentPresenter 对 象 上 。ContentPresenter 类 只 有 ContentTemplate 属 性 、 
没有 Template 属 性 ， 这 了 吏 证 明了 承载 由 DataTemplate 生 成 的 一 组 控件 是 
它 的 专门 用 途 。 

至 此 我 们 可 以 看 出 ， 由 ControlTemplate 生 成 的 控件 树 其 树 根 就 是 
ControlTemplate 的 目标 控件 ， 此 模板 化 控件 的 Template 属 性 值 束 是 这 个 
ControlTemplate 实 例 ， 与 之 相仿 ， 由 DataTemplate 生 成 的 控件 树 其 树 根 
征 一 个 ContentPresenter 控 件 ， 此 模板 化 控件 的 ContentTemplate 属 性 值 吏 
是 这 个 DataTemplate 实 例 。 因 为 ContentPresenter 控 件 是 ControlTemplate 
控件 树 上 的 一 个 结 点 ， 所 以 DataTemplate 控 件 树 是 ControlTemplate 控 件 
树 的 一 株 子 树 。 它 们 的 关系 如 网 11-16 所 示 。 





图 11-16 ”DataTemplate 与 ControlTemplate 的 关系 


既然 Template 生 成 的 控件 树 都 有 根 ， 那 么 如 何 找到 树 根 呢 ?” 办 法 非 
第 简单 ， 每 个 控件 都 有 个 名 为 TemplatedParent 的 属性 ， 如 果 它 的 值 不 为 
null， 说 明 这 个 控件 是 由 Template 目 动 生成 的 ， 而 属性 值 束 是 应 用 了 模 
板 的 控件 (模板 的 目标 ， 模 板 化 控件 ) 。 如 果 由 Template 生 成 的 控件 使 
用 了 TemplateBinding 获 取 属 性 值 ， 则 TemplateBinding 的 数据 源 束 是 应 用 
了 这 个 模板 的 目标 控件 。 

回顾 一 下 本 章 开 涉 的 DataTemplate 实 例 代码 : 


<DataTemplate> 
«and» 
<StackPanel Onentation-" Horizontal" 
cand» 
«Rectangle Stroke-" Yellow" Fillz" Orange" Width= | Binding Price)" /> 
<TextBlock Text-" | Binding Year" /> 
«Gnd» 
<TextBlock Text-" [Binding Price; " Margin-" 5,0" /> 
«IStackPanel^ 
</Grid> 
</DataTemplate> 


这 里 用 到 的 是 普通 Binding 而 不 是 TemplateBinding， 那 数据 源 叉 是 
谁 呢 ? 不 知 大 家 是 侣 还 记得 ， 当 为 一 个 Binding 只 指定 Path 不 指定 Source 
时 ，Binding 会 沿 厦 他 辑 树 一 下 同上 找 、 查 看 每 个 结 点 的 DataContext 属 
性 ， 如 果 DataContext 引 用 的 对 象 具有 Path 指 定 的 属性 名 ，Binding 束 会 把 
这 个 对 象 当 作 目 己 的 数据 源 。 显 然 ， 如 果 把 数据 对 象 赋值 给 
ContentPresenter 的 DataContext 必 性， 由 DataTemplate 生 成 的 控件 目 然 会 
找到 这 个 数据 对 象 并 把 它 当 作 目 己 的 数据 源 。 


11.4.2 ”DataTemplate 与 ControlTemplate 的 应 用 


为 Template 设 置 其 应 用 目标 有 两 种 方法 ， 一 种 是 逐个 设置 控件 的 
Template/ContentTemplate/ItemsTemplate/CellTemplate 等 属性 ， 不 想 应 用 
Template 的 控件 不 设置 ， 另 一 种 是 整体 应 用 ， 即 把 Template 应 用 在 菏 个 
AST Id SS E. 

把 ControlTemplate 应 用 在 所 有 目标 上 需要 借助 Style 来 实现 ， 但 Style 
不 能 标记 X:Key， 例 如 下 面 的 代码 : 


«Window x:Class-"WpfApplication2. Window |" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title" Template" 
Height" 150" Width= 230 > 

<Window.Resources> 
«Style TargetType="{x:Type TextBox]"» 
«Setter Property-" Template"? 
«Setter. Value? 
«Control Template TargetType-" Ix: Type TextBox} "> 
<l- pi lb] f A8 g-— 
</ControlTemplate> 
</Ñetter.Value> 
</Setter> 
«Setter Property-" Margin" Value="5" /> 
«Setter Property-" BorderBrush" Value= Black" /> 
«Setter Property-" Height" Value= 23 /> 
</Style> 
</Window.Resources> 
<StackPanel> 
<TextBox /> 
<TextBox /> 
« TextBox Style="{x:Null}" Margin= 5" /> 
«/StackPanel^ 
«Window? 


Style 没 有 X:Key 标 记 ， 默 认为 应 用 到 所 有 由 x:Type 指 定 的 控件 上 ， 
如 条 不 起 应 用 则 需 把 控件 的 Style 标 记 为 {x:Null}。 运 行 效果 如 图 11-17 所 
ZN o 


E` Template 


— — < — 


没有 应 用 Style 的 TextBoy 





图 11-17 ”运行 效果 
把 DataTemplate 应 用 在 某 个 数据 闫 型 上 的 方法 是 设置 DataTemplate 
的 DataType 必 性， 并 且 DataTemplate 作 为 资源 时 也 不 能 市 有 xX:Key 标 记 。 
fon Pm: 


«Window x:Class-" WpfApplication |. Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winf/2006/xaml" 
xmins:localz"elr-namespace: W pfA pplication 1" 
xmlns:cz" clr-namespace:System.Collections;assembly2mscorlib"' 
Title-"DataTemplate" Height-" 300" Width-" 300" 

«Window Resources? 
<l--DataTemplate--> 
«DataTemplate DataType="{x:Type local:Unit}"> 
<Grid> 
<StackPanel Orientation="Horizontal"> 
<Grid> 
<Rectangle Stroke-" Yellow" Fill="Orange" Width=" Binding Price!" /> 
<TextBlock Text-" [Binding Year!" /> 
</Grid> 
<TextBlock Text-" [Binding Price!" Margin="5,0" /> 
</StackPanel> 
</Grid> 
</DataTemplate> 
< 数据 源 -> 
<c:ArrayList x:Key="ds"> 
<local:Unit Year="2001 年 " Price="100" /> 
<local:Unit Year="2002 年 " Price="120" /> 
<local:Unit Year-"2003 年 " Price="140" > 
<local:Unit Year-"2004 年 " Price="160" /> 
<local:Unit Year="2005 年 " Price="180" > 
<local:Unit Year="2006 年 " Price-"200" /> 
</c:ArrayList> 
</Window. Resources> 
<StackPanel> 
«ListBox ItemsSource-" [StaticResource ds]" /> 
«ComboBox ItemsSourcez"[StaticResource ds]" Marginz"5" /> 
«/StackPanel- 


«Window» 


代码 中 DataTemplate 的 目标 数据 类 型 和 ListBox 的 条 目 类 型 都 是 
Unit: 


public class Unit 

| 
public int Price | get; set; | 
public string Year | get; set; j 


| 


此 时 DataTemplate 会 目 动 加 载 到 所 有 Unit 类 型 对 象 上 ， 人 尺 官 我 并 没 
有 为 ListBox 和 ComboBox 指 定 ItemsTemplate， 一 样 会 得 到 如 图 11-18 所 示 
的 运行 效 末 。 


B` DataTemplate 














— E148 运行 效果 


很 多 时 候 数 据 是 以 XML 形 式 存 储 的 ， 如 果 把 XML 结 点 先 转 换 成 
CLR $5 28789 HEw H] DataTemplate gt KIRN f o DataTemplatefR ^ fE, 
HA E ei XML NS £i ka ATE HOST E] ZI BÉ XML Jj H HJ Jú Z= 
名 《标签 名) 可 以 作为 DataType， 元 系 的 子 结 点 和 Attribute 可 以 使 用 
XPath 来 访问 。 下 面 的 代码 使 用 XmlDataProvider 作 为 数据 源 〈 其 XPath 指 
出 的 必须 是 一 组 结 点 ) ， 请 注意 细 广 之 处 的 变化 ( 己 用 粗 体 标 出 〉: 





«Window Backeround="Comsilk" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
x:Class-"WpfApplicationl. Window" Title-"DataTemplate" 
SizeToContent-" WidthAndHeight"» 

<Window.Resources> 
<l--Data Template--> 
<DataTemplate DataTypez "Unit" > 
«nd» 
sStackPanel Orientation" Horizontal" 
sand» 
«Rectangle Stroke-" Yellow" Fill-"Orange" 
Width-" [Binding XPathz € Price" /> 
<TextBlock Text-" {Binding XPath=@ Year }" /> 
</Grid> 
<TextBlock Text-" [Binding XPath=@Price}" Margin-"5,0" /> 
</StackPanel> 
sand» 
«/Data Template 


<-- 数 据 源 -> 
<XmlDataProvider x:Key="ds" XPath=" Units/Unit > 
<x:XData> 
«Units Xmjns= “> 
«Unit Year-"2001" Price-" 100" /> 
«Unit Year-"2001" Price-" 120" /> 
«Unit Year-"2001" Price-" 140" /> 
«Unit Year-"2001" Price-" 160" /> 
«Unit Year-"2001" Price-" 180" /> 
Unit Year-"2001" Price-"200" /> 
</Units> 
zx: X Data> 
< XmlDataProvider> 
</Window.Resources> 
<StackPanel> 
<ListBox ItemsSource-" {Binding Source=[StaticResource ds}}" > 
<ComboBox ItemsSource-" [Binding Source={StaticResource ds}}” Margin-" 5" /> 
</StackPanel> 
</Window> 
XML 最 大 的 优势 是 可 以 方便 地 表示 带 有 层级 的 数据 ， 比 如 “年 级 - 
MER 5 "NH" B E SER S IXZR SER S SR. JH, WPF D 
TreeView 和 Menultem 控 件 用 来 显示 层级 数据 。 能 够 帮助 层级 控件 显示 层 
级 数据 的 模板 是 HierarchicalDataTemplate。 下 向 是 两 个 实际 工作 中 常见 
的 例子 。 
第 一 个 例子 是 使 用 TreeView 显 示 多 层级 、 不 同类 型 数据 。 因 为 数据 
类 型 不 同 ， 所 以 我 们 需要 为 每 种 数据 设计 一 个 借 板 ， 这 束 有 机 会 使 每 种 
数据 类 型 有 目 己 独特 的 外 观 。 
数据 保存 在 项 目 根 目录 的 Data.xml 文 件 中 ， 内 容 如 下 : 


<?xml version="1.0" encoding-"utf-8" ?> 
«Data Xmlns= > 
<Grade Name=" 一 平 级 必 
«Class Name=" H" 
«Group Name-"A £f"/» 
«Group Name-"B #H"/> 
«Group Name-"C Z"/» 
</Class> 
«Class Name-" Z J"> 
«Group Name="A #H"/> 
«Group Name-"B 组 "请 
«Group Name="C #H"/> 
</Class> 
</Grade> 
«(rade Name=" 二 乎 级 "> 
«Class Name=" 甲 班 "> 
«Group Name="A "> 
«Group Name-"B 组 "请 
«Group Name="C #B"> 
</Class> 
«Class Name=" Z 4"> 
«Group Name-"A #H"/> 
«Group Name-"B £f"/* 
«Group Name-"C H" 
</Class> 
</Grade> 
</Data> 


程序 的 XAML 代 码 如 下 : 


«Window x:Class="WpfApplication].Windowl" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 

Title" HierarchicalDataTemplate" Height-"300" Width-" 300" 
«Window.Resources? 
t-il 
«XmlDataProvider x:Key-" ds" Source-"Data.xml" XPath-" Data/Grade" /> 
LEA 
«HierarchicalData Template DataType-" Grade" ItemsSource-" [Binding XPath=Class } "> 
<TextBlock Text-" | Binding XPath-(dà Name" /> 
«JHierarchical DataTemplate? 
<|-- 班 级 顶板 --> 
«HierarchicalDataTemplate DataType-" Class" ItemsSource-" [Binding XPath=Group} "> 
«RadioButton Content-" [Binding XPath=(@Name}" GroupName-" gn" /> 
«JHierarchical DataTemplate? 
L^ MR S 
«HierarchicalDataTemplate DataType-" Group" ItemsSource-" | Binding XPath-Student] "> 
«CheckBox Content-" | Binding XPath-(a)Name]" /> 
«IHierarchical Data Template? 
«/Window.Resources? 
«and» 
«TreeView Margin-" 5" ItemsSource-" [Binding Source |StaticResource ds] i" /> 
«land» 


«Window? 


程序 运行 效果 如 图 11-19 所 示 。 
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图 11-19 运行 效果 


第 二 个 例子 是 同一 种 数据 类 型 的 众 矢 结构 ， 这 种 情况 下 只 设计 一 个 
HierarchicalDataTemplate P] VA f , ERT ^E B SB INIHBIAGR. 
数据 仍然 存放 在 Data.xml 文 件 中 ， 数 据 全 都 是 Operation 基 型 : 


< xml version="1.0" encoding="utf-8" 7» 
«Data xmlns=""> 
«Operation Name-" X: P" Gesture-" F^ 
«Operation Name=" 新 建 " Gesture-" N"» 
«Operation Name=" 项 目 " Gesture="Control + P"/> 
<Operation Name=" 网 站 " Gesture-"Control + W"/» 
<Operation Name-" X f" Gesture="Control + D"/> 
</Operation> 
«Operation Name=" 保 存 " Gesture="S"/> 
«Operation Name=" 打 印 " Gesture-"P"/» 
<Operation Name=" 退 出 " Gesture="X"/> 
«/Operation? 
«Operation Name=" 编 辑 " Gesture-" E" 
«Operation Name=" 拷 由 " Gesture-"Control + C"/* 
<Operation Name=" J UJ" Gesture="Control + X"/> 
«Operation Name-" fili" Gesture="Control + V"/> 
</Öperation> 
</Data> 


程序 的 XAML 代 码 如 下 : 


«Window x:Class="WpfApplication] Windowl" 
xmins-"http://schemas.mierosoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"hitp://schemas.microsoft.com/winf/2006/xaml" 
xmlns:sys-"clr-namespace:System;assembly-mseorlib" 
Title-"HierarchicalDataTemplate" Height-" 300" Width-" 300" 

<Window. Resources> 
zt 
«XmlDataProvider x:Key-"ds" Source-"Data.xml" XPath-"Data/Operation" /> 
«|--Operation 模板 --> 
<HierarchicalData Template DataType="Operation" 
ItemsSource-" | Binding XPath=Operationi"> 
«StackPanel Orientation-"Horizontal"? 
<TextBlock Text-" [Binding XPath-()Name]" Margin-" 10, 0" /> 
<TextBlock Text-" [Binding XPath-(üGesture]" > 
</StackPanel> 
</HierarchicalDataTemplate> 
</Window.Resources> 
<StackPanel> 
«Menu ltemsSource=" {Binding Source=!StaticResource ds] 1" > 
</StackPanel> 
</Window> 
运行 效果 如 图 11-20 所 示 。 
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项 目 Control + P 
网 站 Control + W 
Tis Control + D 






图 11-20 ”运行 效果 


值得 一 提 的 是 ，HierarchicalDataTemplate 的 作用 目标 不 是 MenuItem 


的 内 容 ， 而 是 它 的 Header。 如 果 对 MenuItem 的 单 击 事件 进行 侦 听 处 理 ， 
我 们 就 可 以 从 被 单 击 MenuItem 的 Header 中 取出 XML 数据 。 
XAML 代 人 码 如 下 : 


<StackPanel Menultem.Click-"StackPanel Click" 
«Menu ItemsSource-" [Binding Source [StaticResource ds] }" /> 
</StackPanel> 


SÉTEAPPE STRUD P: 


private void StackPanel Click(object sender, RoutedEventArgs e) 
| 
Menultem mi = e.OriginalSource as Menultem; 
XmlElement xe = mi.Header as XmlElement; 
MessageBox.Show(xe.Attributes[" Name" |]. Value); 
| 
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图 11-21 运行 效果 


一 旦 全 到 数据 ， 使 用 数据 去 张 劲 什么 样 的 网 和 辑 吏 完全 由 你 来 决定 
了 。 比 如 可 以 维护 一 个 CommandHelper 类 ， 根 据 拿 到 的 数据 来 决定 执行 
什么 RoutedCommand。 


11.43 “寻找 失落 的 控件 


“和 井 水 不 犯 河水 ”第 用 来 形容 两 个 组 织 之 间 界 限 分 明 、 互 不 相干 ， 
LogicalTree 与 控件 内 部 这 标 小 树 之 间 殉 体 持 看 这 样 的 和 天 系 。 换 句 话 说 ， 
如 果 UI 元 素 树 上 有 个 x:Name='"TextBoxl" 的 控件 ， 某 个 控件 内 部 也 有 一 
个 由 Template 生 成 的 x:Name="TextBox1" 的 控件 ， 它 们 并 不 冲突 ， 
Logical Tree RA BEE A HBH T FFA RTA AREIS 
MATA. MIRRE: “E RS I-RE ANIV In] Templatel^ 
部 的 控件 、 获 取 它 的 属性 值 ， 己 不 是 做 不 人 到了? ”放心 ，WPF 为 我 们 准 
| 现在 瓯 让 我 们 出 发 去 寻找 那些 失 洲 的 
ZAE | 

由 ControlTemplate 或 DataTemplate 生 成 的 控件 都 是 “由 Template 生 成 
的 控件 >。ControlTemplate 和 DataTemplate 两 个 类 均 派 生 自 
FrameworkTemplate 类 ， 这 个 类 有 个 名 为 FindName 的 方法 供 我 们 检索 其 
内 部 控件 。 也 束 是 说 ， 只 要 我 们 能 拿 到 Template， 找 到 其 内 部 控件 束 不 
成 问题 。 对 于 ControlIemplate 对 象 ， 访 问 其 日 标 控 件 的 Template 属 性 束 
能 拿 到 ， 但 想 拿 天 DataTemplate 对 象 就 要 费 一 番 周 折 了 。 二 万 不 要 ET 
ListBoxItem&zX t ComboBoxltem 7 23 3) zz Data Template l^] H #r £F Hf ! 
为 控件 的 Template 属 性 和 ContentTemplate 属 性 可 是 两 码 事 〈 请 参考 前 a 
小 广内 容 )。 

我 们 先 来 寻找 由 ControlTemplate 生 成 的 控件 。 [l a sm 
ControlTemplate 并 把 它 应 用 在 一 个 UserControl 上 。 界 面 上 还 有 一 个 
Button， 在 它 的 Click 事 件 处 理 需 中 我 们 检索 由 ControlTemplate 生 成 的 代 
人 

程序 的 XAML 代 码 如 下 : 


«Window x:Class="WpfApplication 1. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-" Control Template" 
Height-" 172" Width-" 300 > 

«Window. Resources? 
«ControlTemplate x:Key-"cTmp > 
<StackPanel Background-" Orange" 
«TextBox x:Name- "textBox1" Margin-"6" /> 
«TextBox x:Name- "textBox2" Margin- "6,0" /> 
« TextBox x:Name-"textBox3" Margin-"6" /> 
</StackPanel> 
</ControlTemplate> 
</Window. Resources> 
<StackPanel Background="Yellow"> 
<UserControl x:Name="uc" Template-" [StaticResource cTmp}" Margm= 3 /> 
«Button Content="Find by Name" Width="120" Height="30" Click-" Button. Click" > 
«/StackPanel» 
«Window 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 


| 
TextBox tb = this.uc. Template. FindName("textBox 1", this.uc) as TextBox; 
tb. Text = "Hello WPF"; 
StackPanel sp = tb.Parent as StackPanel; 
(sp.Children[ 1] as TextBox).Text = "Hello Control Template": 
(sp.Children[2] as TextBox). Text = "I can find you!"; 


运行 程序 并 单 击 按钮 ， 效 果 如 图 11-22 所 示 。 
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图 11-22 ”运行 效果 


接 下 来 我 们 来 寻找 由 DataTemplate 生 成 的 控件 。 不 过 在 正式 开始 之 
前 ， 请 大 家 先 思 考 一 个 问题 ， 寻 找到 一 个 由 DataTemplate 生 成 的 控件 
后 ， 我 们 想 从 中 获取 哪些 数据 ， 如 果 想 获得 单纯 与 用 户 界 面相 关 的 数据 
(比如 控件 的 宽度 、 高 度 等 ) ， 这 么 做 是 正确 的 ;但 如 果 是 获取 与 业务 
逻辑 相关 的 数据 ， 那 束 要 考虑 程序 的 设计 是 不 是 出 了 问题 因为 WPF 
采用 数据 驱动 UI 逆 辑 ， 获 取 业 务 远 辑 数 据 的 事情 在 的 层 就 能 做 a 到， 一般 
不 会 跑 到 表层 上 来 找 。 

先 来 看 一 个 简单 的 例子 。 作 为 业务 进 辑 数据 的 关 如 下 : 


public class Student 


| 
public int Id | get; set; | 





public string Name | get; set; j 

public string Skill | get; set; | 

public bool HasJob | get; set; ! 
| 


界面 XAML 代 人 如 下 : 


«Window x:Class-"WpfApplication]. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmins:local-"clr-namespace: WpfApplication]" Title-" Data Template" FontSize-" 16" 
Height" 175" Width- 220^» 

<Window. Resources> 
<|-- 煞 据 对 象 -> 
<local:Student x:Key="stu" Id-"]" Name= Timothy" Skill-"WPF" HasjJop= True" /> 
<l--Data Template--> 
<Data Template x:Key="stuDT"> 
«Border BorderBrush-"Orange" BorderThickness-"2" ComerRadius="5"> 
<StackPanel> 
<TextBlock Text-" [Binding Id}" Margin="5" /> 
<TextBlock x:Name="textBlockName" Text-" {Binding Name Margin="5" /> 
<TextBlock Text=" [Binding Skill! " Margin-"5" /> 
</StackPanel> 
</Border> 
</Data [emplate> 
</Window. Resources> 
<l-- 主 体 布局 --> 
<StackPanel> 
< ContentPresenter x: Name-" cp" Content-" [StaticResource stuj" 
ContentTemplatez" [StaticResource stuDT]" Margin-"5" /> 
«Button Content-"Find" Margin" 5,0" Click-"Button Click" /> 
«/StackPanel^ 
«Window? 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 
| 
TextBlock tb = this.cp.ContentTemplate.FindName(" textBlockName", this.cp) as TextBlock; 


MessageBox.Show(tb.Text); 


I/Student stu = this.cp.Content as Student; 
//MessageBox.Show(stu. Name); 


| 


未 被 注释 的 代码 是 使 用 DataTemplate 的 FindName 方 法 获取 由 
DataTemplate 生 成 的 控件 并 访问 其 属性 ， 被 注释 的 代码 是 直接 使 用 撒 层 
数据 。 显 然 ， 如 果 为 了 获取 Student 的 某 个 属性 ， 应 该 使 用 锌 注释 的 代码 
而 不 必 统 到 表层 控件 上 来 ， 除 非 你 想得到 的 是 控件 的 长 上 度 、 和 宽度 等 与 业 
务 馆 辑 无 天 的 纯 UI 属 性 。 

下 面 再 来 看 一 个 复杂 的 例子 。DataTemplate 的 一 个 常用 之 处 是 
GridViewColumn 的 CellTemplate 属 性 。 把 GridViewColumn 了 放置 在 
GridView 控 件 里 束 可 以 生成 表格 了 。GridViewColumn 的 默认 
CellTemplate 是 使 用 TextBlock 只 读 性 地 显示 数据 ， 如 果 我 们 想 让 用 户 能 
修改 数据 或 者 使 用 CheckBox 显 示 bool 类 型 数据 的 话 束 需要 上 日 定义 
DataTemplate. 

还 是 先 定义 这 个 名 为 Student 的 类 : 


public class Student 

| 
public int Id | get; set; | 
public string Name | get; set; | 
public string Skill | get; set; | 
public bool HasJob | get; set; } 


准备 数据 集合 、 呈 现 数 据 的 工作 全 部 由 XAML 代 人 码 来 完成 : 


«Window x:Class="WpfApplicationl.Windowl" 
xmlns-"http:/schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:c-"clr-namespace:System.Collections;assembly-mscorlib" 
xmlns:local-"clr-namespace: WpfApplication]" Title-" DataTemplate" Height-" 300" 
Width-"300" Background- "Orange" 

«Window.Resources? 

<|- 煞 据 集 全 -> 

«c: ArrayList x:Key="stuList"> 
«]ocal:Student Id="1" Name-" Timoty Liu" Skill-"WPF" HasJob-" True" /> 
<local:Student Id="2" Name-"Tom Chang" Skill-"BI/SQL" HasJob-"True" /> 
«]ocal:Student Id-"3" Name-"Guan Chong" Skill-"Wnting" HasJob-" False" /> 
«|ocal:Student Id-"4" Name-"Shanshan" Skill-" C/Java" HasJob-"False" /> 
<local:Student Id-"5" Name-" Pingping Zhang" Skill= Writing" HasJob-" False" /> 
«Jocal:Student Id="6" Name= Kenny Tian" Skill-" ASP.NET" HasJob-" False" /> 

«lc: ArrayList> 

<l--DataTemplates--> 

<Data Template x:Key="nameDT"> 
«TextBox x:Name="textBoxName" Text-" [Binding Namej" /> 


«JDataTemplate? 


<Data Template x:Key="skillDT"> 
<TextBox x:Name="textBoxSkill" Text-" | Binding Skillj" /> 
«JDataTemplate? 
«DataTemplate x:Key="hjDT"> 
«CheckBox x:Name-" checkBoxJob" IsChecked-" {Binding HasJobj " /> 
«/DataTemplate? 
</Window. Resources> 
<!-- 主 体 布局 --> 
«Grid Margln= 3 > 
«ListView x:Name="listViewStudent" ItemsSource-" | StaticResource stuList]" 
«ListView. View? 
<GridView> 
<GridViewColumn Header-" ID" DisplayMemberBinding-" [Binding 1dj" /> 
«GridViewColumn Header=" 姓 名 " CellTemplatez"[StaticResource nameDT]" /> 
«GridViewColumn Header-" 127" CellTemplatez" [StaticResource skillDT]" /> 
«Grid ViewColumn Header-" C T. f" CellTemplatez" [StaticResource hjDT]" /> 
</GridView> 
<JListView.View> 
</ListView> 
«fand» 
«Window? 


程序 的 运行 效 末 如 图 11-23 所 示 。 
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图 11-23 ”运行 效果 
然后 ， 我 们 为 显示 姓名 的 TextBox 琴 加 GotFocus 事 件 的 处 理 需 : 


«DataTemplate x:Key="nameDT"> 
«TextBox x:Name="textBoxName" Text-" jBinding Name!" GotFocus="TextBoxName GotFocus" /> 
</DataTemplate> 


734.1 ] Xe tE DataTemplate H WI EP E ARE Hr AA EAE — 
个 由 此 DataTemplate 生 成 的 TextBox 都 会 在 获得 焦点 时 调用 
TextBoxName_GotFocus 这 个 事件 处 理 器 。TextBoxName_GotFocus 的 代 
tih F: 


private void TextBoxName GotFocus(object sender, RoutedEventArgs e) 


| 
省 访问 业务 地 辑 数据 
TextBox tb = e.OriginalSource as TextBox; /获取 事件 发 起 的 源头 
ContentPresenter cp = tb. TemplatedParent as ContentPresenter; — // 获取 模板 目标 
Student stu = cp.Content as Student: / REOR B 
(his JistViewStudent.Selectedltem -stu; — // iz & ListView 的 选中 项 
I VERE RT 8 
ListViewItem lvi = this.list ViewStudent. 

ItemContainerGenerator.ContainerFromlItem(stu) as ListViewItem; 

CheckBox chb = this. FindVisualChildeCheckBox-(lvi); 
MessageBox.Show(chb.Name); 

| 


private ChildType FindVisualChild<ChildType>(DependencyObject obj) 
where ChildType : DependencyObject 


| 
for (int 1 7 0; 1 € Visual TreeHelper.GetChildrenCount(ob]); I++) 
DependencyObject child = Visual TreeHelper.GetChild(obj, 1); 
if (child != null && child is ChildType) 
return child as ChildType; 
else 
| 
ChildType childOfChild = FindVisualChild<ChildType>(child): 
if (childOfChild (= null) 
return childOfChild; 
| 
| 
return null: 
| 


当 使 用 GridView 作 为 ListView 的 View 属 性 时 ， 如 果 某 一 列 使 用 


TextBox 作 为 CellTemplate， 那 么 即使 这 列 中 的 TextBox 梓 鼠标 单 击 并 获 
得 了 焦点 ListView 也 不 会 把 此 项 作为 目 己 的 Selectedltem。 上 所 以 ， 
TextBoxName_GotFocus 的 本 半 部 分 就 是 先 获 得 事件 的 最 初 源头 
(TextBox) ， 然 后 疝 UI 元 素 树 上 洲 到 DataTemplate 的 目标 控件 
(ContentPresenter) 并 获取 它 的 内 容 ， 它 的 内 容 一 定 是 一 个 Student 实 
例 。 
TextBoxName_GotFocus 的 后 半 部 分 则 借助 VisualTreeHelper 类 检索 
由 DataTemplate 生 成 的 控件 。 前 面 说 过 ， 每 个 ItemsControl 的 派生 类 (如 
ListBox, ComboBox, ListView) 都 具有 日 己 独 特 的 条 日 容器 ， 使 用 
ItemContainerGenerator.ContainerFromItem 方 法 就 能 获得 包装 着 指定 条 目 
数据 的 容器 ， 本 例 中 是 一 个 包 闭 着 Student 对 象 的 ListViewItem (注意 : 
此 ListViewItem 对 象 的 Content 也 是 Student 对 象 ) 。 可 以 把 这 个 
ListViewItem 控 件 视 为 一 棵 子 树 的 根 ， 使 用 VisualTreeHelper 类 就 能 壳 历 
它 的 各 个 结 点 。 本 例 中 是 把 过 历 算法 封装 在 了 FindVisualChild 范 型 方法 
B 
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图 11-24 ”运行 效果 


由 本 例 可 以 看 出 ， 无 论 是 从 事件 源头 “目下 而 上 ?地 找 ， 还 是 使 用 
ItemContainerGenerator. ContainerFromItem 方 法 找到 条 目 容 器 再 “ 自 上 而 
PHR, AZ, RENVER EA (Student 实 例 ) 并 不 难 ， 而 工作 中 
大 多 数 时 候 是 操作 业务 逻辑 数据 。 如 果真 的 要 寻找 由 DataTemplate 生 成 
的 控件 ， 对 于 结构 简单 的 控件 ， 可 以 使 用 DataTemplate 对 象 的 FindName 


方法 ;对 于 结构 复杂 的 控件 ， 则 需要 信 助 VisualTreeHelper 来 实现 。 
11.5 深入浅出 话 Style 


Style FIRK E FERN. FARS, ARKAE JE 
态 外 观 和 行为 举止 。 同 样 一 个 人 人， 如果 留 平 次 、 罕 上 足球 队 的 队 服 、 脚 
器 战 皆 ， 看 上 去 就 感觉 他 是 一 名 叱 啶 球场 的 运动 员 ; 如 果 让 他 换 上 一 二 
笔 手 的 西装 、 罕 上 及 畦 ， 再 擒 上 一 个 公文 包 ， 看 上 去 束 是 一 位 商务 人 
士 ; 如 果 让 他 酉 起 爆炸 头 、 戴 上 茎 锐 、 打 几 个 耳 孔 再 罕 上 一 映 肥 大 的 体 
有 内装 ， 活 脱 脱 一 个 非 主流 形象 。 这 些 束 是 静态 外 观 风格 ， 是 通过 改变 一 
些 属性 值 的 搭配 来 实现 的 。 除 了 从 静态 外 观 来 判断 一 个 人 的 风格 ， 我 们 
还 会 观察 他 的 行为 特点 。 比 如 遇 到 困难 时 ， 有 些 人 很 乐观 、 照 样 谈 突 风 
^E, HES AARUETR. FAD TIRE, AEAII ARRENA, 
这 束 是 行为 风格 ， 行 为 风格 是 由 对 外 界 刺 激 的 啊 应 体现 出 来 的 。 说 到 这 
儿 ， 大 家 一 定 能 想到 一 种 职业 一 一 演员 。 演 员 束 是 靠 调 整 目 己 的 郁 态 和 
行为 风格 来 饰演 各 种 角色 的 。 

如 条 把 WPF 窗 体 看 作 一 个 舞台 ， 那 么 窗 体 上 的 控件 就 是 一 个 个 泪 
员 ， 气 们 的 职责 吏 是 在 用 户 界 面 上 按照 业务 馆 辑 的 需要 扮 汗 目 己 的 角 
色 。 为 了 让 同一 种 控件 能 担当 起 不 同 的 角色 ， 程 序 员 就 要 为 它们 设计 多 
种 外 观 样 式 和 行为 动作 ， 这 束 是 Style。 构 成 Style 最 重要 的 两 种 元 素 是 
Setter 和 Trigger，Setter 类 帮助 我 们 设置 控件 的 表态 外 观 风 格 ，Trigger 类 
则 帮助 我 们 设置 控件 的 行为 风格 。 


11.5.1 Style 中 的 Setter 


Setter， 设 置 右 。 什 么 的 设置 右 呢 ?属性 值 的 。 我 们 给 属性 赋值 的 
时 候 一 般 都 及 用 “属性 名 = 属性 值 ” 的 形式 。Setter 类 的 Property 属 性 用 来 
E 你 想 为 目标 的 哪个 属性 赋值 ;Setter 类 的 Value 属性 则 是 你 提供 的 属 


下 面 的 例子 中 在 Window 的 资源 词典 中 放置 一 个 针对 TextBlock 的 
Style，Style 中 使 用 若干 Setter 来 设 定 TextBlock 的 一 些 属性 ， 这 样 程序 中 
的 TextBlock 就 会 具有 统一 的 风格 ， 除 非 你 使 用 {x:Null} 显 示 地 清空 
Style。 

XAML 代 人 码 如 下 : 





«Window x:Class="WpfApplication1. Window!" 
xmins="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.mictosoft.com/winfx/2006/xaml" Title-"Style" 
Height-"132" Width="300"> 

<Window. Resources> 
«Style TargetType="TextBlock"> 
«Stvle.Setters» 
«Setter Propertyz"FontSize" Valuez"24" /> 
«Setter Property=" TextDecorations" Valuez "Underline" /> 
«Setter Propertyz"FontStyle" Value=" Italic" /> 
«JStyle.Setters 
x/style» 
zWindow.Resources? 
<StackPanel Margin-" 5" 
<TextBlock Text-"Hello WPF!" /> 
<TextBlock Text-"This is a sample for Style!" /> 
<TextBlock Text="by Tim 2009.12.23" Style="{x:Null}" /> 
</StackPanel> 
«Window» 


因为 Style 的 内 容 属性 是 Setters， 所 以 我 们 可 以 直接 在 <Style> 标 俭 的 
内 容 区 域 写 Setter。 上 面 的 代码 可 以 简化 如 下 : 


«style TargetType-" [TextBlock > 
«Setter Property-"FontSize" Value-"24" > 
«Setter Property-" TextDecorations" Value= Underline" > 
«Setter Property-"FontStyle" Value= Italic" > 

«[style» 


运行 效果 如 图 11-25 所 示 。 








Hello WPF! 


This is a sample for Stvle! 
by Tim 2009.12.23 





图 11-25 ”运行 效果 
根据 上 面 这 个 例子 我 们 可 以 推 如 ， 如 果 想 设置 控件 的 


ControlTemplate， 只 需要 把 Setter 的 Property 设 为 Template 并 为 Value 提供 
一 个 ControlTemplate 对 象 即 可 。 


11.5.2 Style 中 的 Trigger 


Trigger， 触 肥 右 ， 即 当 菜 些 条 件 满足 时 会 触 友 一 个 行为 (比如 某 些 
值 的 变化 或 动画 的 发 生 等 ) 。 触 及 堪 比 较 像 事件 。 事 件 一 般 是 由 用 户 操 
作 和 触及 的 ， 而 触 有 硕 除 了 有 事件 触 友 型 的 EventTrigger 外 还 有 数据 变化 
触发 型 的 TriggevDataTrigger 及 多 条 件 触 发 型 的 
MultiTrigger/MultiDataTriggerSs . 

1. PE Trigger 

Trigger2S xe dico AK HJ fl cde. RIA ] Setter, TriggertB A Property4ll 
Value 这 两 个 属性 ，Property 是 Trigger 天 注 的 属性 名 称 ，Value 是 触发 条 
件 。Trigger 类 还 有 一 个 Setters 属 性 ， 此 属性 值 是 一 组 Setter， 一 旦 触发 条 
件 修 满足 ， 这 组 Setter 的 “属性 一 值 ” 诫 会 锐 应 用 ， 触 友 条 件 不 再 满足 
后 ， 各 属性 值 会 被 还 原 。 

下 面 这 个 例子 中 包 侣 一 个 针对 CheckBox 的 Style， 当 CheckBox 的 
IsChecked 属 性 为 true 的 时 候 前 景色 和 字体 会 改变 。XAML 代 但 如 下 : 


«Window x:Class="WpfApplicationl Window" 
xmlns-"http://schemas.mierosoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title= Trigger" 
Height-" 130" Width-" 300" 

«Window.Resources 
«Style Target Type-" CheckBox > 
«Style. Triggers? 
«Trigger Property" IsChecked" Value= true > 
«Trigger.Setters» 
«Setter Propertyz" FontSize" Valuez"20" /> 
«Setter Propertyz"Foreground" Valuez"Orange" /> 
«JTrigger.Setters» 
«Trigger» 
</Style. Triggers> 
</Style> 
</Window.Resources> 
<StackPanel> 
<CheckBox Content-" IH RRE T" Margin="5" /> 
«CheckBox Content-" IE 4132 1H HRK" Margin-"5,0" /> 
«CheckBox Content=" 我 挥 一 挥 衣 袖 " Margin="5" > 
<CheckBox Content-" vitre — Fr z: 32" Margin-"5,0" /> 
«/StackPanel» 
«Window 


为 Triggers 不 是 Style 的 内 容 属性 ， 所 以 <Style.Triggers>... 
</Style.Triggers> 这 层 标签 不 能 省 略 ， 但 Trigger 的 Setters 属 性 是 Trigger 的 
内 容 属 性 ， 所 以 <Trigger.Setters>...</Trigger.Setters> 这 层 标签 是 可 以 省 
HHJ, DA ERIE a PARAL: 


<Trigger Property="IsChecked" Value="true"> 
«Setter Property="FontSize" Value= 20 /> 
«Setter Property="Foreground" Value-" Orange" /> 
< Trigger> 


运行 效果 如 图 11-26 所 示 。 


[a Trigger 


LL TRIBBUSEE T 


圆 上 如 我 愉 愉 的 来 
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图 11-26 ”运行 效果 
2. Multilrigger 
MultiTrigger 是 个 容易 让 人 误解 的 名 字 ， 会 让 人 以 为 是 多 个 Trigger 
集成 在 一 起 ， 实 际 上 叫 MultiConditionTrigger 更 合适 ， 因 为 必须 多 个 条 
件 同时 成 立时 才 会 被 触 友 。MultiTrigger 比 Trigger 多 了 一 个 Conditions 属 
性 ， 需 要 同时 成 并 的 条 件 束 存储 在 这 个 集合 中 。 
让 我 们 稍微 改动 一 下 上 和 面 的 例子 ， 要 求 同 时 满足 CheckBox 被 选中 
有 昌 Content 为 “正如 我 悄悄 的 来 ?时 才 会 补 触 发 。XAML 代 人 码 如 下 X Style 
部 分 ) : 
«Style TargetType="CheckBox"> 
<Style, [riggers> 
«Multi Trigger? 
«MultiTrigger.Conditions» 
«Condition Propertyz"IsChecked" Valuez "true" /> 
«Condition Propertyz" Content" Value=" 正 如 我 悄悄 的 来 " /> 
«[MultiTrisger.Conditions 
«MultiTrigger.Setters? 
«Setter Property-"FontSize" Value-"20" /> 
«Setter Property-"Foreground" Value-"Orange" /> 
«/MultiTrigger.Setters? 
«/MultiTrigger? 
«/Style.Triggers 
</Style> 


运行 效 来 如 图 11-27 所 示 。 
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3. 由 数据 触 友 的 DataTrigger 

程序 中 经 第 会 遇 到 基于 数据 执行 麻 些 判断 情况 ， 遇 到 这 种 情况 时 我 
们 可 以 考虑 使 用 DataTrigger。DataTrigger 对 象 的 Binding 属 性 会 把 数据 源 
源 不 断送 过 来 ， 一 旦 送 来 的 值 与 Value 属性 一 致 ，DataTrigger 即 被 蚀 
及 


下 面 例子 中 ， 当 TextBox 的 Text 长 度 小 于 7 个 字符 时 其 Border 会 保持 
红色 。XAML 代 码 如 下 : 


<Window x:Class-"WpfApplication] Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title" Data Trigger" 
xmlns:local-"clr-namespace: WpfApplication]" Height-"130" Width-" 300" 
<Window. Resources> 
«local: L2BConverter x:Keyz"evtr" /> 
«Style TargetType-" TextBox > 
«Style.Triggers? 
«Data Trigger 
Binding-" [Binding RelativeSource-z[x:Static — RelativeSource.Self], PathzText.Length, 
Converterz|StaticResource cvtr]]" 
Valuez "false" 
«Setter Propertyz" BorderBrush" Valuez"Red" /> 
«Setter Property" BorderThickness" Valuez"1" /> 
«[DataTrigeer» 
</Style. Triggers> 
</Style> 
</Window.Resources> 
<StackPanel> 
«TextBox Margin-" 5" /> 
«TextBox Margin" 5,0" /> 
«TextBox Margin-" 5" /> 
</StackPanel> 
«Window 
这 个 例子 中 唯一 需要 解释 的 就 是 DataTrigger 的 Binding。 为 了 将 控件 
日 己 作 为 数据 源 ， 我 们 使 用 了 RelativeSource， 初 学 者 经 常 认 为 “不 明确 
指出 Source 的 值 Binding 就 会 将 控件 自己 作为 数据 的 来 源 ”， 这 是 错误 
的 ， 因 为 不 明确 指出 Source 时 Binding 会 把 控件 的 DataContext 属 性 当 作 数 
据 源 而 非 把 控件 上 自身 当 作 数据 源 。Binding 的 Path 被 设置 为 Text.Length， 
印 我 们 关注 的 是 字符 串 的 长 度 。 长 度 是 一 个 具体 的 数字 ， 如 何 基于 这 个 
长 度 信 做 判断 呢 ? 203901 8] f Converter. RATEU P^ HJ Converter: 


public class L2BConverter : IValueConverter 
| 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
| 
int textLength = (int)value; 


return textLength > 6 ? true : false; 


public object ConvertBack(object value, Type target Type, object parameter, CultureInfo culture) 


throw new NotImplementedException(); 


| 


经 Converter 转 换 后 ， 长 度 值 会 转换 成 bool 交 型 值 。DataTrigger 的 
Value 被 设置 为 false， 也 就 是 说 当 TextBox 的 文本 长 度 小 于 7 时 DataTrigger 
会 使 用 自己 的 一 组 Setter 把 TextBox 的 边框 设置 为 红色 。 

运行 效 末 如 网 11-28 所 示 。 





1234567 


图 11-28 运行 效果 


4. 多 数据 条 件 触 发 的 MultiDataTrigger 

有 时 我 们 会 遇 到 了 要求 多 个 数据 条 件 同时 满足 时 才能 触 肥 变化 的 需 
求 ， 此 时 可 以 考虑 使 用 MultiDataTrigger。 比 如 有 这 样 一 个 需求 : 用 户 界 
面 上 使 用 ListBox 显 示 了 一 列 Student 数 据 ， 当 Student 对 象 同 时 满足 ID 为 
2、Name 为 Tom 的 时 候 ， 条 目 束 蜗 有 党 显示 。 

示例 的 XAML 代 人 码 如 下 : 


«Window x:Class-"WpfApplicationl, Window" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.mierosoft.com/winfx/2006/xaml" Title-"MultiDataTrigger" 
Height-"146" Width-" 300" 

<Window. Resources> 
<Style TargetType="ListBoxltem"> 
<|-- 便 用 Style 设置 DataTemplate--> 
«Setter Property= ContentTemplate" 
«Setter. Value? 
«DataTemplate 
«StackPanel Orientation" Horizontal" 
<TextBlock Text-" [Binding IDj" Width-"60" /> 
<TextBlock Text-" | Binding Name)" Width-" 120" /> 
<TextBlock Text-" [Binding Age Width-"60" /> 
</StackPanel> 
</DataTemplate> 
</Setter. Value 
</Setter> 
<l--MultiData Trigger--> 
<Style.Trigpers> 
«MultiData Trigger» 
«MultiDataTrigger.Conditions» 
«Condition Bindingz" [Binding Path-ID]" Valuez"2" /> 
«Condition Binding-" [Binding PathzName]" Value=" Tom" /> 
«/MultiDataTrigger.Conditions» 
«MultiDataTrigger.Setters» 
«Setter Property=" Background" Valuez "Orange" /» 
«[MultiDataTrigger.Setters» 
«/MultiDataTrigger» 
</Style.Triprers> 
</Style> 
</Window.Resources> 
<StackPanel> 
<ListBox x:Name- "listBoxStudent" Margin-"5" /> 
</StackPanel> 
«Window? 


示例 的 C# 代 人 码 部 分 包括 声明 市 有 ID、Name、Age 属 性 的 Student 交 
和 将 一 个 List<Student> 实 例 赋值 给 ListBox 的 ItemsSource 属 性 ， 在 此 和 涯 
略 。 程 序 的 运行 效 末 如 几 11-29 所 示 。 














图 11-29 运行 效果 


5. 由 事件 触发 的 EventTrigger 

EventTrigger 古 触 友 和 右 中 最 特殊 的 一 个 。 自 完 ， 它 不 是 由 属性 值 或 
数据 的 变化 来 触发 而 是 由 事件 来 触及; 其次， 被 触发 后 它 并 非 应 用 一 组 
ee 而 是 执行 一 段 动 夯 。 因 此 ，UI 层 的 动画 效果 往往 与 EventTrigger 

i 

在 下 面 这 个 例子 中 创建 了 一 个 针对 Button 的 Style， 这 个 Style 包 含 两 
个 EventTrigger， 一 个 由 MouseEnter 事 件 触 友 ， 男 一 个 由 MouseLeave 事 
件 触发 。XAML 代 码 如 下 : 


«Window x:Class="WpfApplication] Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-" Event Trigger" 

Height-"240" Width-"240"» 
«Window.Resources 
<Style TargetType-" Button > 
«Style. Triggers> 
<la BUR ÀN -> 
«EventTrigger RoutedEvent-" MouseEnter > 
<BeginStoryboard> 
«Storyboard^ 
zDoubleAnimation To-" 150" Duration" 0:0:0.2" Storyboard. TargetProperty-" Width" /> 
«DoubleAnimation To-" 150" Duration-"0:0:0.2" Storyboard. TargetProperty-" Height" /> 
</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
<la RR JT -> 
<EventTrigger RoutedEvent="MouseLeave"> 
<BeginStoryboard> 
<Storyboard> 
<DoubleAnimation Duration-"0:0:0.2" Storyboard. TargetProperty-" Width" /> 
*DoubleAnimation Duration-"0:0:0.2" Storyboard. TargetProperty-" Height" /> 
</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
</Style.Triggers> 
</Style> 
</Window.Resources> 
«Canvas? 
«Button Width-"40" Height-" 40" Content-"OK" /> 
«i Canvas? 
«/Window? 
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全 此 各 种 触及 左 惑 介绍 完了 ， 近 醒 大 家 注意 一 点 : 虽然 在 Style 中 大 





量 使 用 触 友 右 ， 但 触发 器 并 非 只 能 应 用 在 Style 中 各 种 Template 也 可 
以 拥有 上 自己 的 触 友 费 ， 请 大 家 根据 设计 需要 决定 触发 器 放 在 Style 中 还 古 
Template 中 。 


12 
Z= AIZ EI 


如 今 的 软件 市 场 ， 苋 搜 已 经 进入 了 日 热 化 的 阶段 ， 功 能 强 、 运 算 
快 、 界 面 友 好 、bug 少 、 价 格 低 都 已 经 成 为 必 备 条 件 。 这 还 不 算 完 ， 随 
看 计算 机 的 多 巡 体 功能 越 来 越 强 ， 软 件 的 界面 是 任 色 彩 腕 丽 、 古 人 否 能 通 
EE 3D SS CR Xe 18 5| FE WREE CS pk pa CP T G; 1625 HJ 
ANE o 

软件 项 目 成 功 与 否 的 三 个 要 系 是 资源、 成本、 时 间 。 无 论 是 为 了 
在 苋 争 中 你 持 不 败 还 是 为 了 激发 起 用 户 对 软件 的 兴趣 ， 提 融 软 件 界 面 的 
美化 程度 、 恰 当地 将 动画 和 3D 等 效果 引入 应 用 程序 都 是 一 个 必然 趋 
努 。 然 而 ， 使 用 传统 的 果 面 应 用 程序 开 及 工具 和 框 六 《如 WinForm、 
MFC, VB, Delphis) 进行 开 及 时 ， 为 了 使 软件 的 界面 变 床 元、 加 入 
动 国 或 者 3D 效 来 ， 边 际 成 本 会 非常 高 。 体 现在 : 

e 资源 消耗 增 大 : 需要 招聘 懂得 动画 和 3D 编 程 的 程序 员 ， 还 需要 
更 多 的 设计 师 ， 工 新 和 沟通 成 本 随 之 上 升 。 

Š Ren 界面 美化 、 动 男 和 3D 开 及 远 比 业务 馆 辑 开发 困 
HE FERT -o 

- e 成 本 增加 : 随 独 资源 消耗 的 增加 和 开 及 时 间 的 拉 长 ， 成 本 必然 
Ils 

之 所 以 会 出 现 这 种 情况 ， 根 本 原因 在 于 传统 开发 工具 和 框架 并 没有 
原生 地 文 持 美化 用 户 界 面 、 同 应 用 程序 中 添加 动 国 和 3D 等 效 末 的 功 
能 。 举 个 徐 单 例 于 ， 当 用 户 提出 希望 把 TextBox 的 外 面 改 为 圆 角 时 ， 
WinForm 或 Delphi 程 序 员 只 能 通过 铂 生 新 类 并 在 撒 层 做 修改 的 方法 来 实 
现 。 类 似 的 用 户 需 求 还 有 很 多 不 得 不 实现 ， 否 则 客户 会 怀疑 我 们 的 开发 
Bé JJ; 即使 实现 了 也 没有 什么 额外 的 经 济 效益 ， 因 为 在 客户 上 腿 里 这 些 都 
征 很 徐 单 的 事情 。 

WPF 的 推出 可 谓 对 症 下 药 、 专 门 解决 上 述 问题 。 体 现在 : 

e XAML 语 言 针对 的 是 界面 美化 问题 ， 可 以 让 设计 师 直 接 加 入 开 
及 团队 、 降 低 沟 通 成 本 。 

Ir P 可 以 轻 多 绘制 出 复 森 的 图 
"hs IH] 。 
e WPF TF Spa JJ, HJ Uf Photoshopj#|li FE Z3 25 2s JU £ RH A 


R, 

e WPF 原 生 支 持 动 画 开 发 ， 无 论 是 设计 师 还 是 程序 员 ， 都 能 够 使 
用 XAML 或 C# 轻 松 开 发 制作 出 炫丽 的 动画 效果 。 

e WPF 原 生 文 持 3D 效 果 ， 甚 至 可 以 将 其 他 3D 建 模 工 具 创 建 的 模型 
导入 进来 、 为 我 所 用 。 

e Blend 作 为 专门 的 设计 工具 让 WPF 如 虎 添 翼 ， 既 能 帮助 不 了 解 编 
FER BITRE ET. 叉 能 帮助 资深 开发 者 快速 建立 图 形 或 动画 的 原 


” 本意， 我 们 由 静态 图 形 绘制 入 手 ， 进 而 学 习 动 画 效果 的 制作 ， 最 后 
领略 一 下 3D 设 置 的 风采 。 


12.1 WPFZZ 


与 传统 .NET 开 发 使 用 GDI+ 进 行 绘图 不 同 ，WPF 拥 有 上 自己 的 一 套 网 
形 API。 使 用 这 套 API 不 但 可 以 轻松 绘制 出 精美 的 图 形 ， 还 可 以 方便 地 
为 图 形 添加 各 种 类 似 Photoshop 的 “ 滤 锐 效果 ”及 “变形 效果 ”。 本 市 我 们 就 
一 起 研究 WPF 图 形 API 的 绘图 、 效 果 和 变形 等 功能 。 

在 开始 学 习 WPF 绘 图 之 前 请 先 观 察 下 面 一 组 图 片 〈( 如 图 12-1 所 




















图 12-1 XAML 绘 制 的 矢量 图 效果 
显然 ， 这 组 图 片 是 矢量 图 (Vector Image) ， 无 论 怎 样 放大 / 缩小 

都 不 会 出 现 锯 具 。 你 可 能 会 想 :“ 这 是 组 PNG 格 式 的 图 片 吗 ? ”答案 

是 :“No!” 这 组 图 片 完 全 是 用 XAML 语 言 绘制 的 ! XAML 绘 图 本 身 就 是 


AE), IH Rreth g 2, LLSOEHIPAUSJvHYS pe, j 
功能 丝 嘿 个 亚 于 Photoshop。 以 前 ， 使 用 Photoshop 制 作出 来 的 图 形 需 
程序 员 用 .NET 的 绘图 接口 进行 二 次 转换 后 才能 应 用 在 程序 里 ， 现在 好 
f: i MNIE 束 可 以 了 。 
绘图 并 不 是 Visual ”Studio 的 强项 ， 这 些 漂 须 的 XAML 和 矢量 图 是 怎么 

画 出 来 的 呢 ? 2: 2 A: Er BJJMicrosoft Expression Studio 中 的 Design 和 Blend 
两 个 工具 。Blend 我 们 已 经 介绍 过 ， 用 和 它 可 以 直接 绘制 XAML 图形; 
Design 可 UL fi Photoshops df Fireworks 样 绘制 图 形 ， 再 由 设计 者 决定 叶 
出 为 PNG 或 XAML 格 式 。 昌 然 “ 唯 代码 派 * 的 程序 员 们 在 Visual Studio 里 
一 行 一 行 写 代 人 码 也 能 把 复 林 图 形 以 非 可 视 化 的 形式 创建 出 来 ， 但 在 
Design 或 Blend 中 男 出 原型 再 在 Visual Studio 里 进行 细节 上 的 修饰 才 是 提 
高 效率 之 道 

聚 沙 成 塔 、 集 腋 成 表 ， 别 看 前 面 那 些 图 片 很 复 森 ， 但 都 是 由 有 限 的 
几 个 基本 图 形 组 成 的 。WPF 的 基本 图 形 包括 以 下 几 个 (它们 痢 是 Shape 
类 的 派生 类 ) : 

e Line: HE nU HACER (Stroke) 。 

e Rectangle: JÉ, MAE, V BIB s Fil) 。 

e Ellipse: d. K. ASHA ABI ZJ 1E [Di], HEE Efi XAH 


$56 
r Polygon: 多 边 形 ， 由 多 条 和 直线 段 围 成 的 闭合 区 域 ， 既 天 笔触 义 

e Polyline: Hk CDHE) ， 由 多 条 站 尾 相 接 的 直线 段 组 成 。 

Path: 路 人 符 〈 闭 合 区 域 ， 基 本 图 形 中 功能 最 强大 的 一 个 ， 可 

由 若干 直线 、 圆 弧 、 贝 塞 尔 曲 线 组 成 。 

1. 直线 

直线 是 最 简单 的 图 形 。 使 用 X1、Y1 两 个 属性 可 以 设置 它 的 起 点 从 
标 ，X2、YY2 两 个 属性 则 用 来 设置 其 终点 坐标 。 控 制 起 点 / 终点 坐标 就 
可 以 实现 平行 、 交 错 等 效果 。Stroke (笔触 ) JS VE ET 2 RA ze 
Brush《 男 刷 〉， 几 是 Brush 的 派生 类 均 可 用 于 给 这 个 属性 赋值 。 因 为 
WPF 提 供 了 多 种 渐变 色 画 刷 ， 所 以 画 直 线 也 可 以 画 出 渐变 效果 。 同 时 ， 
Line 的 一 些 属性 还 帮助 我 们 画 出 虚线 以 及 控制 线段 终点 的 形状 。 下 面 的 
例子 综合 了 这 些 属性 : 


«Window x:Class="WpfApplication].Windowl" 
xmlns-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winf/2006/xaml" Title-" Lines" 

Height-"260" Width-" 300" 
<Grid> 
«Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness-" 10" /> 
«Line X1="10" Y 1="40" X2="260" Y2="40" Stroke-"Orange" StrokeThickness="6" /> 
«Line X1="10" Y 1="60" X2="260" Y2-"60" Stroke="Green" StrokeThickness="3" /> 
<Line X1="10" Y1="80" X2="260" Y2-"80" Stroke="Purple" StrokeThickness="2" /> 
«Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1" /> 
«Line XI7"10" Y1="120" X2="260" Y2="120" StrokeDashArray="3" Stroke="Black" 
StrokeThickness-" |" /> 
«Line XI7" 10" Y 17"140" X2-"260" Y2="140" StrokeDashArray-" 5" Stroke-"Black" 
StrokeThickness-" |" /> 
«Line X1="10" Y1="160" X2="260" Y2-" 160" Stroke" Black" StrokeEndLineCap- "Flat" 
StrokeThickness-" 6" /> 
«Line XI7"10" Y1="180" X2-"260" Y2= 180" Stroke-"Black" 
StrokeEndLineCap- "Triangle" StrokeThickness-"8" /> 
«Line X1="10" Y 12"200" X2-"260" Y2-"200" StrokeEndLineCap- "Round" 
StrokeThickness-" 10" 
«Line;Stroke? 
« inearGradientBrush EndPoint-"0,0.5" StartPoint-" 1,0.5"» 
«GradientStop Color-"Blue" /> 
«GradientStop Offset-" |" /> 
«i LinearGradientBrush 
</Line.Stroke> 
</Line> 
«ond» 
«Window» 


实际 效果 如 图 12-2 所 示 。 














图 12-2 ”运行 效果 


y cL 
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有 一 反 需 要 注意 ， EE KNN RR ZER ^t Canvas" FE Rk. GE E BJ 44 y ze “Bl 
布 " 呢 ) , JESEAMAN. REH AEE — Fifi ad torn zu. WES E RI £ SR B AP REESE 
形 的 坐标 。 日 稼 工作 中 ， 第 用 的 绘图 容器 是 Canvas 和 Grid。 


2. Æ 

Ra K HAE (Stroke, EZ) 和 填充 (Fil) 构成 。Stroke 属 性 的 
设置 与 Line 一 样 ，F 刘 属性 的 数据 类 型 是 Brush。Brush 是 个 抽象 类 ， 上 所 以 
我 们 不 可 能 拿 一 个 Brush 类 的 实例 为 Fill 属 性 赋值 而 只 能 用 Brush 派 生 类 的 
Em WPFHjJ22 E 25 E dE EHBrsh2378, "5 HHJ 





e SolidColorBrush: Æ- -Ùm ÆXAML =” 7 UL fi H WEZA 
符 串 〈 如 Red、Blue) 直接 赋值 。 

e LinearGradientBrush: RIEME HEM]. EKAR E HAN 
按 设 定 的 变化 点 进行 渐变 。 

e RadialGradientBrush: 径 同 渐变 国 刷 。 色 彩 治 半径 的 方 同 、 投 设 
定 的 变化 点 进行 渐变 ， 形 成 圆 形 填 充 。 

e ImageBrush: 使 用 图 片 〈Image) 作为 填充 内 容 。 

e DrawingBrush: 使 用 矢量 图 (Vector〉 和 位 图 (Bitmap) fEZJJR 
充 内 容 。 


e VisualBrush: WPF'H IAEA T rb HHErameworkElement2S7kK 
生来 的 ， 而 FrameworkElement 义 是 由 Visual 类 派生 来 的 。Visual 意 为 “可 
视 ” 之 草 ， 每 个 控件 的 可 视 化 形象 束 可 以 通过 Visual 类 有 的 方法 获得 。 获 得 
这 个 可 视 化 的 形象 后 ， 我 们 可 以 用 这 个 形象 进行 填充 ， 这 束 古 
VisualBrush. LU AREE Ba Vs EI ASA ETE TIR 881 23 — "I LER, EE 
标 松 开 之 前 需要 在 鼠标 指针 下 显现 一 个 控件 的 “ 弥 影 ”， 这 个 “ 约 影 ? 束 是 
cp JR 75 HK] SEE, AEREE HI DE PA PRH DZ EL. BS BRCER 
ZZ 

下 和 面 是 使 用 各 种 男 刷 填充 矩形 的 综合 实例 。 


«Window x:Class="WpfApplication1.Window1" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x="http://schemas.microsoft.com/winfx/2006/xam!" 
Title="Rectangle and Brush" Width="600" Height="390"> 
<Grid Margin="10"> 
<Grid.RowDefinitions> 
<RowDefinition Height="160" /> 
<RowDefinition Height="10" /> 
<RowDefinition Height-" 160" /> 
</Grid.RowDefinitions> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="180" /> 
<ColumnDefinition Width="10" /> 
<ColumnDefinition Width="180" /> 
<ColumnDefinition Width="10" /> 
<ColumnDefinition Width="180" /> 
</Grid.ColumnDefinitions> 
«t Sep geo 
«Rectangle Grid.Column-"0" Grid.Row-"0" Stroke" Black" Fill-"LightBlue" /> 


<l EP -> 
«Rectangle Grid.Column-"2" Grid.Row="0"> 
«Rectangle.Fill- 
zLinearGradientBrush StartPoint-"0,0" EndPoint-" L,1" 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color-" ?FF0082BD" Offset-"0.25" /> 
«GradientStop Color-" FF9SDEFF" Offset-"0.6" /> 
«GradientStop Color-" 4FF004F72" Offset-" |" /> 
«JLinearGradientBrush? 
«/Rectangle.Fill 
«Rectangle? 
<l- fe A -> 
<Rectangle Grid.Column="4" Grid.Row="0"> 
<Rectangle.Fill> 
<RadialGradientBrush> 
«GradientStop Color="#FFB6F8F1" Oflset="0" /> 
«GradientStop Color="#FF0082BD" Offset-"0.25" /> 
«GradientStop Color="#FF95DEFF" Offset="0.75" /> 
«GradientStop Color="#FF004F72" Offset="1.5" /> 
</RadialGradientBrush> 
</Rectangle.Fill> 
</Rectangle> 
- BITE 
«Rectangle Grid.Column-"0" Grid. Row="2"> 
<Rectangle, Fill> 
<]mageBrush ImageSource-" Mogo.png" Viewport="0,0,0.3,0.15" 
TileMode="Tile" /> 
<Rectangle. Fill> 
</Rectangle> 


LR DIE 
«Rectangle Grid.Column-"2" Grid. Row="2"> 
«Rectangle.Fill- 
«DrawingBrush Viewport-"0,0,0.2.0.2" TileMode-" Tile" 
«DrawingBrush.Drawing? 
«GeometryDrawing Brush= LightBlue" 
«GeometryDrawing.Geometry? 
«FEllipseGeometry RadiusX-" 10" RadiusY-" 10" > 
«/GeometryDrawing.Geometry? 
«/ Geometry Drawing? 
s/DrawingBrush.Drawing? 
</DrawingBrush> 
<Rectangle. Fill 
</Rectangle> 
SL- HREAN RENA -—> 
<Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10"> 
<Rectangle.Stroke> 
z LinearGradientBrush StartPoint-"0,0" EndPoint-"],1" 
«GradientStop Color-" White" Offset-"0.3" /> 
«GradientStop Color-" Blue" Offset-" 1" /> 
«/LinearGradientBrush? 
<Rectangle. Stroke> 
</Rectangle> 
</Grid> 
«Window? 


运行 效果 如 图 12-3 所 示 。 


| š ' Rectangle and Brush 
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图 12-3 ”运行 效果 
在 使 用 画 刷 的 时 候 ， 建 议 先 在 Blend 里 绘制 出 大 致 效果 然后 再 在 


Visual Studio 里 进行 微调 。 比 如 ， 使 用 Blend 可 以 快速 绘制 出 如 下 线性 渐 
AP. 
«LinearGradientBrush EndPoint-"0.995,0.997" StartPoint-"0.003,0.006" 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color="#FF004F72" Offset-"]" /> 
«GradientStop Color="#FF0082BD" Offset-"0.274" /> 
«GradientStop Color="#FF95DEFF" Offset-"0.665" /> 
«/LinearGradientBrush? 
但 Blend 生 成 的 代码 质量 并 不 高 、 可 读 性 也 比较 差 一 一 数字 过 分 精 
确 、 排 列 二 三 倒 四 ， 所 以 我 们 十 要 进行 调整 。 调 整 后 的 代 人 码 如 下 : 


€ LinearGradientBrush StartPoint="0,0" EndPoimt="1,1"> 
«GradientStop Color="#FFB6F8F1" Offset-"0" /> 
«GradientStop Color="#FF0082BD" Offset-"0.3" /> 
«GradientStop Color="#FF95DEFF" Offset-"0.7" /» 
«GradientStop Color="#FF004F72" Offset-"" /> 
s/LinearGradientBrush 


接 下 来 让 我 们 看 一 个 VisualBrush 的 例子 。 为 了 简单 起 见 ， 目 标 控 件 
人 实际 工作 中 换 成 复 林 控件 的 效果 也 一 样 。 程 序 的 XAML 
尺码 如 下 : 


«Window x:Class=" WptApplication].Window]" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title=" VisualBrush" 
Height-" 300" Width-"400" Backeround- "Orange" 

«Gnd Margin-" 10" 
«Grid. ColumnDefinitions? 
«ColumnDefinition Width" 160" /> 
«ColumnDefinition Widthz"*" /> 
«ColumnDefinition Width-" 160" /> 
«fand. ColumnDefinitions? 
«StackPanel x: Name-"stackPanelLeft" Background-" White" 
«Button x: Name-"realButton" Content= OK" Height-" 40" /> 
«IStackPanel^ 
«Button Content=">>>" Grid.Column-"]" Margin-" 5,0" Click-"CloneVisual" /> 
«StackPanel x: Name-"stackPanelRight" Background-" White" Grid.Column- 2 /> 
</Grid> 


«Window? 


H Ej Button H Click fF Ate SE zs Rd AH F: 


double o = 1.0; // 不 透明 度 计 数 器 
private void CloneVisual(object sender, RoutedEventÁrgs e) 
| 
VisualBrush vBrush = new VisualBrush(this.realButton); 


Rectangle rect = new Rectangle( ; 
rect. Width = realButton.ActualWidth; 
rect. Height = realButton.ActualHeight; 
rect.Fill = vBrush; 

rect.Opacity = o; 

0 = (0.2; 


this.stackPanelRight.Children.Add(rect ; 
运行 效果 如 图 12-4 所 示 。 
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E VisualBrush 
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图 12-4 运行 效果 


3. lg 


椭圆 也 是 一 种 常用 的 几何 图 形 ， 它 的 使 用 方法 与 矩形 没有 什么 区 
别 。 下 面 的 例子 是 绘制 一 个 球体 ， 球 体 的 轮廓 是 正 圆 (Circle) , Width 
与 Height 相 等 的 椭圆 即 是 正 贺 ; 球体 的 光影 效果 使 用 径 回 渐变 实现 。 
XAML 代 码 如 下 : 


«Window x:Class-" WptApplication].Window] 
xmlns-"http:/schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Ellipse" 
Height-"200" Width="200"> 


«rd? 
«Ellipse Stroke-"Gray" Width-" 140" Height-"] 40" Cursor-" Hand" ToolTip-"A Ball > 
«Ellipse.Fill 
RadialGradientBrush GradientOrigin-"0.2,0.8" RadiusX-" 0.75" Radius Y="0.75"> 
«RadialGradientBrush.Relative Transform? 
«TransformGroup 
«RotateTransform Angle-"90" CenterX-"0.5" CenterY-"0.5" /> 
zTranslateTransform /> 
«/TransformGroup? 
«| RadialGradientBrush. Relative Transform? 
«GradientStop Color-" 4FFFFFFFF" Offset-"0" > 
«GradientStop Color= /FF444444" Offset-"0,66" /> 
«GradientStop Color="#FF999999" Offset="1" /> 
</RadialGradientBrush> 
</Ellipse.Fill> 
</Ellipse> 
«Gnd» 
«Window» 


运行 效果 如 图 12-5 所 示 。 





图 12-5 ”运行 效果 


与 前 和 面 所 到 的 一 样 ， 椭 圆 的 绘制 和 色彩 填充 都 是 在 Blend 里 完成 
的 ， 在 Visual Studio 里 又 进行 了 一 些 调整 (包括 规整 数值 、 调 整 顺序 和 
去 挥 无 用 代 但 ) 。 

4. 路 径 

ERIT (Path) 可 以 说 是 WPF 绘 图 中 最 强大 的 工具 ， 一 来 是 因为 它 完 
全 可 以 蔡 代 其 他 几 种 网 形 ， 二 来 它 可 以 将 直线 、 圆 跌 、 贝 赛 尔 曲线 等 基 
本 元 系 络 合 进来 ， 形 成 更 复杂 的 图 形 。 路 径 最 重要 的 一 个 属性 是 Data， 
Data 的 数据 类 型 是 Geometry〔 几 何 图 形 ，， 我 们 正 是 使 用 这 个 属性 将 一 
些 基 本 的 线段 拼接 起 来 、 形 成 复杂 的 图 形 。 

为 Data 属 性 赋值 的 语法 有 两 种 : 一 种 是 标签 式 的 标准 语法 ， 男 一 种 
是 专门 用 于 绘制 几何 图 形 的 “ 跤 径 标 记 语 法 ”。 本 小 市 我 们 借助 标准 语法 
porem 下 一 小 节 我 们 将 学 习 绘制 几何 图 形 的 路 和 颂 标 记 语 
is 

A3 AE H PathZe ils, P Ge SHE JL Ia JZ AUS Ze UMS] zH TE 
Data 属 性 中 的 。Path 的 Data 属 性 是 Geometry 类 ， 但 Geometry 类 是 个 抽象 
类 ， 所 以 我 们 不 可 能 在 XAML 中 直接 使 用 <Geometry> 标 签 。 


EIE dup 
<Path> 


<Geometry> 


<% Geometry> 
< Path> 

我 们 可 以 使 用 的 是 Geometry 的 子 类 。Geometry 的 子 类 包括 : 

e LineGeometry: 和 直线 儿 何 图 形 。 

e RectangleGeometry: 矩形 几何 图 形 。 

e EllipseGeometry: || J LIHT EE. 

e PathGeometry: 路 径 儿 何 图 形 。 

e StreamGeometry: PathGeometry 的 轻 量 级 蔡 代 品 ， 不 文 持 
Binding、 动 男 等 功能 。 

e CombinedGeometry: 由 多 个 基本 几何 图 形 联合 在 一 起 ， 形 成 的 
单一 几何 图 形 。 

e GeometryGroup: 由 多 个 基本 几何 图 形 组 合 在 一 起 ， 形 成 的 几何 
图 形 组 。 

可 能 让 大 家 比较 迷惑 的 是 : 前 面 已 经 见 过 Line、Rectangle、Ellipse 
竺 类， 怎么 现在 义 出 来 LineGeometry、RectangleGeometry、 
EllipseGeometry 类 呢 ? 他 们 的 区 列 在 于 前 面 介 绍 的 Line、Rectangle、 
Ellipse 类 都 是 可 以 独立 存在 的 对 象 ， 而 这 些 *Geometry 类 只 能 用 于 结合 
成 其 他 几何 图 形 、 不 能 独立 存在 当 我 们 在 Blend 里 选中 一 组 独立 的 
几何 图 形 并 在 末 持 里 执行 组 合 路 人 径 的 命令 时 ， 本 质 上 束 是 把 原来 独立 的 
Line、Rectangle、Ellipse 对 象 转换 成 xXGeometry 对 象 并 结合 成 一 个 新 的 复 
KJLI AE. 

回 到 Path 的 Data 必 性， 下面 这 个 例子 是 向 要 展示 各 个 几何 图 形 : 





«Window x:Class="WpfApplication 1. Window!" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x-"http://schemas.microsoft.com/winf/2006/xaml" WindowStyle-"Tool Window" 
Title" "Geometry" Height-"350" Width="340"> 

«Grid» 

«Grid. ColumnDefinitions? 
«ColumnDefimition Width-" 160" /> 
«ColumnDefinition Width-" 160" /> 

«/Gnd.ColumnDefinitions? 

«Grid. RowDefinitions? 
<RowDefinition Height-" 160" /> 
<RowDefinition Height-" 160" > 

«JGrid. RowDefinitions? 


<|-- 且 线 -> 
«Path Stroke="Blue" StrokeThickness="2" Grid.Column-"0" Grid. Row="0"> 
<Path.Data> 
<LineGeometry StartPoint="20,20" EndPoint="140,140" /> 
</Path.Data> 
</Path> 


cL 
«Path Stroke-"Orange" Fill-"Yellow" Grid.Column-"1" Grid.Row-"0"» 
«Path. Data 
«RectangleGeometry Rect-"20,20, 120,120" RadiusX-" 10" RadiusY-"10" /> 
</Path. Data 
</Path> 


<-I E 
«Path Stroke="Green" Fill="LawnGreen" Grid.Column="0" Grid.Row="1"> 
<Path.Data> 
«EllipseGeometry Center="80,80" RadiusX-"60" RadiusY="40" /> 
< Path. Data 
</Path> 
< 一 自 定 义 路 径 (最 为 重要 ) -> 
<Path Stroke=" Yellow" Fill="Orange" Grid.Column="1" Grid.Row="1"> 
<Path.Data> 
«PathGeometry? 
«PathGeometry.Figures 
«PathFigure StartPoint-"25,140" IsClosed-"True"» 
<PathFigure.Segments> 
<LineSegment Pomt="20,40" /> 
<LineSegment Point="40,110" /> 
<LineSegment Pomt="$0,20" /> 
<LineSegment Point-"80,110" /> 
<Linesegment Point-^110,20" /> 
<LineSegment Point="120,110" /> 
<LineSegment Point-" 40,40" /> 
<LineSegment Point="135,140" /> 
</PathFigure.Segments> 
</PathFigure> 
< PathGeometry.Figures> 
</PathGeometry> 
</Path.Data> 
</Path> 
«Gnd» 
«Window» 


运行 效果 如 图 12-6 所 示 。 
































图 12-6 ”运行 效果 


其 中 LineGeometry、RectangleGeometry 和 EllipseGeometry 都 比较 简 
单 ， 现 在 痢 重 来 看 PathGeometry。 可 以 说 ，WPF 绘 图 的 重点 在 于 Path， 
Path 的 重点 在 于 PathGeometry。PathGeometry 之 所 以 如 此 重要 是 因为 Path 
的 Figures 属 性 可 以 容纳 PathFigure 对 象 ， 而 PathFigure 的 Segments 属 性 又 
可 以 容纳 各 种 线段 用 于 结合 成 复 林 图 形 。XAML 代 人 码 结构 如 下 : 


<Path> 
<Path.Data> 
«PathGeometry? 
«PathGeometry.Figures? 
«PathFigure? 
«PathFigure.Segments? 
<-- 各 种 线段 --> 
«jPathFigure.Segments? 
</PathFigure> 
</PathGeometry.Figures> 
< PathGeometry> 
</Path.Data> 
</Path> 


为 Figures 古 PathGeometry 的 默认 内 容 属性 、Segments 是 PathFigure 
的 天 认 内 容 属 性 ， 所 以 第 简化 为 这 样 : 


<Path> 
<Path.Data> 
<PathGeometry> 
<PathFigure> 
<!-- 各 种 线段 -> 
<JPathFipure> 
SPathOeometry> 
</Path.Data> 


< Paths 


本 解 上 和 面 这 个 格式 之 后 ， 束 可 以 把 目光 集中 在 各 种 线段 上 。 它 们 


gu 


e LineSegment: 直线 段 。 
e ArcSegment: HIA ES. 
e BezierSegment: ZKA IÆ HRE GAU J EK H RE tA 
—XHIZ&, BrELCubic— if 716) 。 
e QuadraticBezierSegment: — Ý Ul 3EZK BH Z Ex , 
e PolyLineSegment: Z HRE. 
e PolyBezierSegment: Z = WI I 2 ZJ HI ZE PZ ç 


e PolyQuadraticBezierSegment: 多 二 次 方 贝 塞 尔 曲线 。 

在 绘制 这 些 线段 的 时 候 需 要 注意 ， 所 有 这 些 线段 都 是 没有 起 点 
(StartPoint) 的 ， 因 为 起 点 就 是 前 一 个 线段 的 终点 ， 而 第 一 个 线段 的 起 
尽 则 是 PathFigure 失 StartPoint。 请 看 下 而 这 些 示 例 。 

LineSegment 取 为 简单 ， 只 需要 控制 它 的 Point〈( 终 点) 即 可 。 


«Window x:Class-" WpfApplicationl. Window" 
xmins-"http;//schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Title-"Segments" 
Height-"200" Width="300"> 

«Gnd VerticalAlignment-" Center" HonzontalAlignment-" Center" 
«Path Stroke-" Green" Fill-"LawnGreen" StrokeThickness-"2" 
«Path.Data 
«PathGeometry? 
«PathFigure IsClosed- "True" StartPointz "0,0" 
«LineSegment Pointz" 150,0" /> 
€LineSegment Pointz" 150,30" /> 
«LineSegment Point= "90,30" /» 
«LineSegment Point= 90,150" /> 
€LineSegment Pointz"60,150" /> 
«LineSegment Pointz" 60,30" /> 
«LineSegment Point= 0,30" /» 
«[PathFigure» 
«[PathGeometry 
</Path. Data> 
</Path> 
</Grid> 


</Window> 


运行 效 来 如 图 12-7 所 示 。 


| a^ Segments 








图 12-7 运行 效果 


ArcSegment 用 来 绘制 圆 踊 。Point 属 性 用 来 指明 圆 跌 连接 的 终点 ; 
JURE A PAR, Size]# TE BI E sc SECRET ba $H 4 RU D HI € ; 
SweepDirection/& T^: f& HH |i y Ze M] EF J p] xb e hj EEZ; p); An RA 
上 的 两 点 位 置 不 对 称 ， 那 么 这 两 点 间 的 圆 弧 束 会 分 为 大 弧 和 小 弧 ， 
IsLargeArc 属 性 用 于 指明 是 否 使 用 大 弧 去 连接 ;，RotationAngle 属 性 用 来 
ta E 的 旋转 角度 。 如 图 12-8 所 示 古 对 几 个 属性 的 变化 做 了 详 
细 的 对 比 ; 


Point: 100,100 
Size: 5025 
SweepDirection: Clockwise 
lsLargeArc True 
RotationAngle: 0 


Point: 100,100 
Sie; 50,25 
SweepDirection: Clockwise 
lsLargeArc: True 
RotationAngle: 45 


Point; 100,100 
Size: 50,25 
SweepDirection: Clockwise 
lsLargeAre, True 
RotationAngle: 90 


Point: 

Size: 
SweepDirection: 
le LargeArc: 
RotationAngle: 


Point: 

Size: 
SweepDirection: 
IsLargeArc: 
RotationAngle: 


Point: 

Size: 
SweepDirection: 
lsLargeArc: 
RotationAngle: 


图 12-8  ArcSegmentIiJ L^ JE 


100,100 
50,25 
Clockwise 
True 


100,100 
60,25 
Clockwise 
True 


100,100 
50,60 
Clockwise 
True 


Point: 100,100 
Sire: 50,25 
SweepDirection: Clockwise 
IsLargeArc; True 
RolationAngle: 0 


Point: 150,100 
Size: 5025 
SweepDirection: Clockwise 
IsLargeArt: True 
RotationAngle: 0 


ge 


Point: 100,150 
Sire: 50,25 
SweepDirection: Clockwise 
IeLargeArc; True 
RotationAngle: 0 





性 变化 时 的 效 末 对 比 


BezierSegment (ZA Ul 3&7 Bil Zi). 由 4 个 点 决定 : 


(1) 起 点 : 
(2) ZX rr, 


` 
w N /4yyy3 @ 


(3) 两 个 控制 点 : 
再 走 同 Point2 的 方 同 ， 最 后 到 达 


即 前 一 个 线段 的 


2X. rT 


w 4 YNN 


或 PathFigure 的 StartPoint。 


Point3 属 性 ， 即 曲线 的 终点 位 置 。 


百科 “ 贝 塞 尔 曲线 " 词 条 。 
如 下 为 XAML 代 码 表示 的 三 次 方 贝 塞 尔 曲线 : 


2X. HH 


AN Ayyy 


Point1 和 Point2 属 性 。 
粗略 地 说 ， 三 次 方 贝 老 尔 曲线 就 是 由 起 点 出 发 走 同 Point1 的 方 同 ， 
的 平滑 曲线 ， 具 体 算 法 请 查阅 维基 





«Path Stroke-"Black" StrokeThickness="2"> 
«Path.Data 
«PathGeometry? 
«PathFigure StartPoint-" 0,0" 
«BezierSegment Point] 7" 250,0" Point27"50,200" Point3-" 300,200" /5 
< PathFigure> 
</PathGeometry> 
</Path.Data> 
</Path> 


其 显示 效 末 如 图 12-9 所 示 。 


| Í 
Pointi 


Point2 N as 


s 





图 12-9 =A DUE BH Zo P 


iege gei cr (XJ; NERKA) 5 BezierSegment2S 
似 ， 只 是 控制 点 由 两 个 减少 为 一 个 。 也 融 是 说 ，QuadraticBezierSegment 
由 3 个 后 决定 : 
(1) 起 点 : 即 前 一 个 线段 的 终点 或 PathFigure 的 StartPoint。 
(2) 终点 : Point2 属 性 ， 即 曲线 的 终点 位 置 。 
(3) 一 个 控制 点 : Pointl. 
如 下 为 XAML 人 代码 表示 的 二 次 方 贝 玫 尔 曲线 : 


«Path Stroke-" Black" StrokeThickness="2"> 
«Path.Data 
«PathGeometry? 
«PathFigure StartPoint-" 0,200" 
«QuadraticBezierSegment Point] -"150,- 100" Point2= 300,200" 
«JPathFigure» 
</PathGeometry> 
</Path.Data> 
</Path> 


其 显示 效果 如 图 12-10 所 示 。 


| Point2 
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人 至此， 简单 的 基本 路 径 残 介绍 完了 。 如 果 想 绘制 出 复杂 的 图 男 来 ， 
我 们 要 做 的 仅仅 是 在 PathFigure 把 Segment 一 段 一 段 加 上 去 。 

GeometryGroup 也 是 Geometry 的 一 个 派生 类 ， 它 最 大 的 符 扣 是 可 以 
将 一 组 PathGeometry 组 合 在 一 起 。 如 下 面 的 例子 所 示 : 


«Path Stroke-"Black" Fill="LightBlue" StrokeThickness=" 1"> 
<Path.Data> 
<GeometryGroup> 
<PathGeometry> 
«PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="250,0" Point2="50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPomt="0,0"> 
<Bezlersegment Point] 7"230,0" Pomt2= 50200 Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="210,0" Point2="50,200" Point3-"300,200" > 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0.0"> 
<BezierSegment Pointl="190,0" Point2="50,200" Point3="300,200" /> 
<!PathFigure> 
«/PathGeometry- 
«PathGeometry- 
«PathFigure StartPoint-"0,0" 
«BezierSegment Point" 170,0" Point27"50,200" Point3-"300,200" /> 
</PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0.0"> 
«BezierSegment Point]—" 150,0" Point2="50,200" Point3="300,200" /> 
</'PathFigure> 
</PathGeometry> 
<PathGeometry> 
<PathFigure StartPoint="0,0"> 
<BezierSegment Pointl="130,0" Point2="50,200" Point3="300,200" /> 
</PathFigure> 
</PathGeometry> 
</GeometryGroup> 
</Path.Data> 
</Path> 


运行 效 来 如 图 12-11 所 示 。 


Segments 





图 12-11 用 GeometryGroup 将 一 组 PathGeometry 组 合 起 来 


5 路径 标 记 语 法 

Path 是 如 此 之 强大 ， 可 以 让 我 们 随心 所 欲 地 绘制 图 形 ， 然 而 它 的 一 
大 缺点 也 是 不 容 忽视 的 ， 那 承 是 其 标签 却 语 法 的 烦 玉 。 一 般 情 况 下 ， 复 
林 图 形 (Path) 都 是 由 数 十 条 线段 连接 而 成 ， 按 照 标 签 式 语法 ， 每 条 线 
Ek (Segment) 是 一 个 标签 、 每 个 标签 占据 一 行 ， 一 个 图 形 就 要 占 去 几 
十 行 代码 。 而 这 仪 仪 是 一 个 图 形 ， 要 组 成 一 个 完整 的 图 画 叉 往往 需要 十 
多 个 图 形 组 合 在 一 起 ， 有 可 能 占据 数 百 行 代码 ! SEITE SES CH A 
生 ， 因 为 我 们 可 以 借助 专 供 WPF 绘 图 使 用 的 路 径 标 记 语 法 (Path 
Markup Syntax) 来 极 大 地 简化 Path 的 描述 。 

路 径 标 记 语 法 实际 上 束 是 各 种 线段 的 筒 记 法 ， 比 如 ，<LineSegment 
Point-"150,5" 六 可 以 简写 为 ”150,5”， 这 个 L 就 是 路 径 标 记 语 法 的 一 
个 “绘图 命令 ”"。 不 仅 如 此 ， 路 径 标 记 语 法 还 增加 了 一 些 更 实用 的 绘图 命 
令 ， 比 如 H 用 来 画 水 平 直线 ， “H 180” 就 是 指 从 当前 点 画 一 条 水 平 直 线 ， 
终点 的 模 坐 标 是 180 (你 不 需要 考虑 纵 坐 标 ， 它 与 当前 点 的 纵 坐 标 一 
致 ; 。 关 似 地 还 有 V 命 令 ， 用 来 男 紧 百 直 线 。 

使 用 路 径 标记 语法 绘图 时 一 般 分 三 步 : 移动 至 起 点 ~” 绘图 ~ 闭合 图 
形 ， 这 三 步 使 用 的 命令 稍 有 差别 。 移 动 到 起 点 使 用 的 是 “移动 命令 ”ML 
绘图 使 用 的 是 绘图 命令 ， 和 包括 L、H、V、A、C、Q 和 等， 下面 会 逐一 介 
绍 ; 如 果 图 形 是 财 合 的 ， 需 要 使 用 “闭合 命令 ”2， 这 样 最 后 一 条 线段 的 


终点 与 第 一 条 线段 的 起 点 间 会 连接 上 一 条 直线 段 。 

路 径 标 记 语 法 是 不 区 分 大 小 写 的 ， 所 以 A 与 a、H 与 h 痢 是 等 价 的 。 
在 路 径 标记 语法 中 使 用 两 个 double 类 型 数值 来 表示 一 个 点 ， 第 一 个 值 表 
ANB CHWA o 8o BAS Cindy) ， 两 个 数 信 奴 
可 以 使 用 逗号 分 阳 Oy) 又 可 以 使 用 空格 分 隔 (x y) 。 由 于 路 径 标记 
法 语 中 使 用 空格 作为 两 个 点 之 间 的 分 隔 ， 为 了 避免 泥 消 ， 建 议 使 用 逗号 
作为 点 横 纵 坐标 的 分 隔 符 。 

如 表 12-1 所 示 是 常用 路 人 径 标 记 语 法 的 总 结 。 

表 12-1 和 常用 路 径 标 记 语 法 的 总 结 


Hi "() (^ 


1503 
绘制 水 平 | puu "m 
H A H Aube |H 180 PED 
P» | Ë: W 
V jh. “I V Aids | V 19 BEEN 绘图 命令 


& "HR sa sagi 

T 旋转 角度 |A 8080 45 11| C 

Hu 4 E, IsLargeArc-"True ASIE 

AOL MU | 150,150 Gc TT 

Web Aus ep | iuam" Clockwise 
Point-^150,150" /> 
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«BezierSegment 
=I J) |C F l|C2500 50200 | Pointl- "250,0" 






C liu [uM E dug | | RMA 
塞 尔 曲 线 | 控制 点 2 终点 | 300,200 Point2="50,200" zii 
Point3-"300,200" > 
o EUR Q Ml Q 15040 “papers SQ 
ABA | 终点 300,200 ys 
ERAR ^ Mind Point2="300,200"/> 
| E l: a |s 控制 点 2|4 100,200 SEE m 
S E Ne "v 700 300 ACTES, 
线 sm. 
T 贝 塞 尔 曲 | T 终点 T 400,200 绘图 命令 


线 


— M 0,0 L 40,80 «PathFigure IsClosed- " 
i x | i i L 80,40 : True i ü x ú i 





在 上 述 命令 中 ，S 和 T 两 个 命令 比较 特殊 。S 用 于 绘制 平滑 三 次 方 由 
塞 尔 曲线 ， 但 只 需要 给 出 一 个 控制 点 ， 这 个 控制 点 相当 于 普通 三 次 方 由 
塞 尔 曲线 的 第 二 个 控制 点 ， 之 所 以 第 一 个 控制 点 省 略 不 写 是 因为 平滑 三 
次 方 贝 塞 尔 曲线 会 把 前 一 条 贝 塞 尔 曲 线 的 第 二 控制 点 以 起 点 为 对 称 中 心 
的 对 称 点 当 作 自己 的 第 一 控制 点 (如 果 前 面 的 线段 不 是 贝 塞 尔 曲线 ， 则 
第 一 控制 点 与 起 点 相同 ) 。 例 如 下 面 两 条 曲线 就 是 等 价 的 ; 


«Path Stroke=" Red Data="M 0,0 C 30,0 70,100 100,100 S 170,0 200,0" /> 
«Path Stroke-" Black" Data-"M 0,0 C 30,0 70,100 100,100 C 130,100 170,0 200,0" /> 


与 5 命令 相仿 ，T 命 令 用 于 绘制 平滑 二 次 方 贝 塞 尔 曲 线 ， 绘 制 的 时 候 
如 果 前 面 的 线段 也 是 一 段 二 次 方 贝 塞 尔 曲线 的 话 ，T 命 令 会 把 前 面 这 段 
曲线 的 控制 点 以 起 点 为 对 称 中 心 的 对 称 点 当 作 自 己 的 控制 点 〈 如 果 前 面 
的 线段 不 是 二 次 方 贝 寨 尔 曲线 则 控制 点 与 起 点 相同 ) 。 下 面 两 条 曲线 等 
价 : 

«Path Stroke-"Red" Data="M 0,200 Q 100,0 200,200 T 400,200" /> 


«Path Stroke-"Black" Data="M 0,200 Q 100,0 200,200 Q 300,400 
400,200" /» 

CE 32 1396 uj ERE HH ER ep aya ee T! 使 用 方法 是 把 这 些 命 
令 串 起 来 、 形 成 一 个 字符 串 ， 然 后 赋值 给 Path 的 Data 属 性 。 使 用 Blend 绘 
图 时 ，Blend 会 目 动 使 用 路 径 标 记 语 法 来 记录 数据 而 不 是 使 用 代码 量 巨 
大 的 标签 式 语法 。 

6. EH Pathi 2 7i [HI JUR 

Sc bs LIEPA % 8 SU f E AI BUDI af VI BRE] GR, WPFETEXCJ 
面 做 了 民 好 的 文 持 ， 仪 需 使 窗 体 或 控件 的 Clip 属 性 就 可 以 轻松 做 到 。 

Clip 属 性 被 定义 在 UIElement 类 中 ， 因 此 WPEF 窗 体 和 所 有 控件 、 网 形 
都 上 共有 这 个 属性 。Clip 属 性 的 数据 类 型 是 Geometry， 与 Path 的 Data 属 性 
一 致 。 因 此 ， 我 们 只 要 投 需 求 制作 好 特殊 形状 的 Path 并 把 Path 的 Data 属 
性 值 赋 给 目标 窗 体 、 控 件 或 其 他 图 形 ， 对 目标 的 总 切 束 完成 了 。 请 看 下 
面 这 个 不 规则 窗 体 的 例子 : 


«Window x:Class="WpfApplication2. Window" 
xmins-"http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" Width-"300" Height-"250" 
Backeround-" LawnGreen" AllowsTransparencyz" True" WindowStylez" None" 

«Grid VerticalAlignment-" Center" HorizontalAlignment-" Center"? 
«Path Visibility-" Hidden" x:Name-"clipPath" 

Data="M50.000001,0.5 C77.338097,0.5 — 99,5.22,661905 — 99,5,50.00000] — 99.5,533417262 
99.153721,56.753646 98.494339,59.975975 L98.07753,61.78191 100.14996,60.838246 C115.10204,54.228902..132.04643,50.5 
150,50.5 167,95357,50.5.— 184,89796,54.228902 — 199,85004,60.838246 — L201.92247,61.781907 — 201.50566,59.975979 
C200,84628,56.753646 200.5.53.417262 200,5.50.000001 200.5.22.661905 222 .66191,0.5 2500.5 277.33809.0.5 2995 22 661905 
299.5.50.00000] —299,5,77.338005 27733809095 250005 249.14569,99.5 248,.20642,09,478350 — 247.45273,99,.435503 
[.245.86905,99.315166 246.28394,99,955688 C254.71242.113,3457 239.5,128.69034 259.5,145 259.5.197.1909 210.47517,239.5 
|502305 89,524818,239.5.— 40,5,197.1909 — 40,499998,145 — 40,5,128.60034 — 45.28758,113.3457.— 53.716058,99,955688 
L54,130958,99.315166 52.54726.99 435593 C51.70357699 478359 30,854316,99,5 50.000001.99,5 22.661905,99.5 0,5.77.338095 
(.5,50.000001 0.5,22.661905 22.661905 0.5 50.000001.0.5 z" /> 

«Button VerticalAlignment="Center" HorizontalAlignment-" Center" Width-" 80" 

Height-"25" Name- buttonClip" Click-"buttonClip Click »Clips/Button? 

«land» 


«Window» 


EDER- KH Rammo iE / ? 其 实 它 们 是 我 在 Blend 里 男 
BRIJ, dX uc aY 2 E BIB A, tik EJUS ER RIDES — 
做 人 简化。 

如 果 想 让 一 个 窗 体 能 够 被 驴 切 ， 那 么 其 AllowsTransparency 必 须 设 
为 True， 这 个 属性 设 为 True 后 ，WindowStyle 属 性 必须 设 为 None。 

窗 体 中 Button 的 Click 事 件 处 理 器 如 下 : 


private void buttonClip Click(object sender, RoutedEventArgs e) 


| 
this.Clip = this.clipPath.Data: 


| 


运行 程序 、 单 击 Clip 按 钮 ， 会 得 到 如 图 12-12 所 示 效 果 。 





图 12-12 ”使 用 Path 前 截 界面 元 素 


JOKES 2E BRUT] B4 RIR ! 

里 然 任务 完成 了 ， 但 Blend 生 成 的 路 径 标 记 其 质量 实在 是 太 开 了， 
这 是 我 男 了 三 个 椭圆 然后 合并 路 径 所 产生 的 那么 多 数据 ， 让 我 们 优化 一 
下 。 实 际 上 ， 一 个 米 老 鼠 的 剪影 用 4 个 A 命 令 就 能 搞定 ， 优 化 后 的 数据 
如 下 《运行 效 朱 不 变 ) : 


«Path Visibility=" Hidden" x:Name="clipPath" 
Data="M 55,100 A 50,50 0 1 1 100,60 A 110,95 0 0 1200,60 A 50,50 0 1 1 250,100 A 110,95 0 1 155,100 Z" > 


12.2 ”图 形 的 效果 与 滤 镜 


以 往 ， 令 程序 员 们 很 头疼 的 一 件 事 就 是 要 精确 实现 UI 设 计 师 们 给 出 
的 样 稳 。 有 些 时 候 程 序 员 可 以 使 用 设计 师 提供 的 图 片 作 为 背景 或 者 贴 
图 ， 但 这 些 图 片 往 往 是 位 图 而 非 矢 量 图 ， 所 以 当 应 用 了 这 些 图 片 的 窗 体 
或 控件 及 生 尺 十 变化 时 ， 疼 片 经 帅 会 出 现 锯齿 、 乌 赛 克 或 失真 等 情况 。 
对 于 那些 对 用 户 体验 要 求 比较 局 的 软件 程序 员 吏 不 能 直接 使 用 位 网 了 ， 
只 能 用 代码 来 实现 设计 师 的 设计 。 要 知道 ， 设 计 师 手 里 用 的 是 
Photoshop、lllustrator、EFireworks 这 些 专业 设计 工具 ， 加 个 阴影 、 生 成 
个 及 光 效 果 也 吏 是 点 点 鼠标 的 事 儿 ， 同 样 的 效果 让 程序 员 用 C# 实 现 可 怠 
没 那 么 容易 了， 有 有 时 候 其 至 要 动用 一 些 在 游戏 编程 中 才 会 用 到 的 技术 与 
知识 ， 这 无 疑 增 加 了 开发 的 难度 与 成 本 。 

WPE 的 出 现 可 谓 是 程序 员 们 的 福音 ， 因 为 不 但 像 阴 影 、 有 发 光 这 种 从 
时 效果 可 以 使 用 一 两 个 属性 实现 ， 束 连通 道 、 动 态 檬 糊 这 些 融 级 的 效果 
也 可 以 轻松 实现 。 同 时 ， 设 计 师 和 程序 员 还 可 以 像 为 Photoshop 开 发 滤 
镜 一 样 为 WPF 开 肥效 末 类 库 ， 届 时 只 要 把 类 库 引 用 到 项 目 中 束 可 以 使 用 
其 中 的 效果 了 “微软 的 官方 网 站 和 一 些 开 源 网 站 上 已 经 有 很 多 效果 类 库 
可 供 使 用 ) 。 

在 UIElement 类 的 成 员 中 你 可 以 找到 BitmapEffect 和 Effect 这 两 个 属 
性 ， 这 两 个 属性 都 能 用 来 为 UI 元 系 添 加 效果 。 你 可 能 会 问 : 为 做 同一 件 
事 准 备 了 两 个 属性 ， 难 道 不 冲突 吗 ? AXE: APR. WERE HI 
本 里 只 有 BitmapEffect 这 个 属性 ， 这 个 属性 使 用 CPU 的 运算 能 力 为 UI 元 
系 洪 加 效果 ， 这 样 做 的 问题 是 效果 一 多 或 者 让 市 有 效果 的 UI 元 系 参 与 动 
于， 程序 的 性 能 会 因 CPU 资 源 航 大 量 占 用 而 大 幅 降 低 《〈 要 么 啊 应 变 慢 ， 
要 么 刷新 或 动画 弯 得 很 卡 ) 。 随 后 的 版 本 中 ， 和 人 微软 决定 转 用 显卡 GPU 的 
运算 能 力 为 UI 元 系 添 加 效果 ， 于 是 添加 了 Effect 这 个 属性 。 这 样 既 减少 
了 对 CPU 的 当 费 又 将 应 用 程序 的 视 党 效 来 拉 平 到 与 洲 戏 程序 一 个 级 别 。 

因为 有 Effect 属性 代 蔡 BitmapEffect 必 性， 所 以 你 在 MSDN 文 档 里 可 
以 看 到 BitmapEffect 属 性 被 标记 为 “已 过 时 ”， 不 过 在 WPF 4.0 中 
BitmapEffect 仍 然 可 以 使 用 ， 也 融 是 说 至 少 未 来 两 三 年 里 BitmapEffect 仿 
然 可 用 。 下 面 让 我 们 浅 答 如 何 使 用 这 两 种 效 束 。 


12.2.1 向 单 多 用 的 BitmapEffect 


BitmapEffect 属 性 定义 在 UIElement 类 中 ， 它 的 数据 类 型 是 
BitmapEffect 类 。BitmapEffect 古 一 个 抽象 类 ， 所 以 我 们 只 能 用 它 的 派生 
类 实例 为 UIElement 时 BitmapEffect 属 性 赋值 。BitmapEffect 类 的 派生 类 并 
des ( 这 也 说 明 BitmapEffect 能 产生 的 界面 效果 并 不 是 很 丰 冠 ) ， 包 括 

H F JL: 


BevelBitmapEffect: RNR- 
BitmapEffectGroup: 复合 效果 《〈 可 以 把 多 个 BitmapEffect 组 合 在 


BlurBitmapEffect: 模糊 效果 。 
DropShadowBitmapEffec: 投影 效果 。 
EmbossBitmapEffect: 浮雕 效 果 。 

e OuterGlowBitmapEffect: 外 发 光 效 果 。 

每 个 效果 部 有 目 己 的 一 系列 属性 可 以 调整 ， 比 如 你 可 以 调整 投影 六 
果 的 投影 高 度 、 阴 影 深 度 和 角度 ， 让 用 户 感 党 区 是 从 霖 个 角度 投 丑 下 
来 ; 你 也 可 以 调整 外 发 光 效 果 的 闫 色 和 延展 距离 。 下 和 面 是 一 个 
DropShadowBitmapEffect 的 简单 例子 : 


e 
e 
一 起 ) 。 
e 
e 
e 


«Gnd» 
«Button Content-" Click Me" Grid.Column-" 0" Grid.Row-"(" Margin- "20" 
«Button.BitmapEffect? 
«DropShadowBitmapElffect Direction" -45" Opacity-" 0.75" ShadowDepth-"7" /> 
«jButton.BitmapEffect? 
</Button> 
«Gnd» 


运行 效 来 如 图 12-13 所 示 。 


| 8' MainWindow 




















Click Me 





图 12-13 ”运行 效果 


对 于 每 个 BitmapEffect 的 派生 类 MSDN 文 档 都 有 相当 详细 的 记述 ， 
请 大 家 上 自行 查阅 。 


12.2.2 丰 定 多 彩 的 Effect 


绘图 软件 Photoshop 能 够 大 获 成 功 的 一 个 重要 原因 了 吏 是 它 的 插件 标 
准 是 公开 的 ， 这 样 ， 众 多 第 三 方 公司 和 人 员 葡 可 以 为 它 设 计 各 种 各 样 的 
插件 、 极 大 地 让 明 它 的 功能 一 一 众人 拾 案 火 燃 高 。 在 众多 有 的 Photoshop 
插件 中 ， 最 重要 的 一 类 残 是 滤 锐 ， 或 者 说 是 岁 片 的 效果 。 比 如 我 想 把 一 
张 图 厂 制 作成 老 照片 的 效果 ， 在 没有 小 匀 的 情况 下 ， 束 需要 手工 调整 很 
多 图 片 属性 才能 作 到 ， 而 使 用 小 镜 ， 则 只 需 把 小 锐 加 载 到 图 片上 即 可 。 
显然 ， 使 用 小 锐 插 件 能 获得 如 下 好 处 : 

e jV LTE 

e (VER. 

e o H r WT 7k E KARYA. 

WPF 引 进 了 这 种 “ 滤 镜 插件 ”的 思想 ， 其 成 果 束 是 UIElement 关 的 
Effect 属性 。Effect 属 性 的 数据 类 型 是 Effect 类 ，Effect 关 是 抽象 类 ， 也 残 
是 说 UIElement 的 Effect 属 性 可 以 接收 Effect 类 的 任何 一 个 派生 类 的 派生 
类 实例 作为 它 的 值 。Effect 类 位 于 System.Windows.Media.Effects 名 称 空 
站 中 ， 它 的 派生 类 有 有 3 个 ， 分 别 古 : 

e BlurEffect: 模糊 效果 。 

e DropShadowEffect: 投影 效果 。 

e ShaderEffect: EERE MRR) 。 

你 可 能 会 想 强大 的 Effect 类 其 派生 类 怎么 还 不 如 已 经 废 莽 的 
BitmapEffect 类 多 呢 ? 答 宁 是 这 样 的 :因为 模糊 和 投影 效果 在 编程 中 用 
的 最 多 ， 所 以 .NET Framework 内 建 了 这 两 个 效 朱 。 这 两 个 效 朱 使 用 起 来 
非常 方便 ， 而 且 请 注意 ， 这 两 个 效果 是 用 GPU 进 行 洽 染 ， 而 不 像 
BitmapEffect 那 样 使 用 CPU 演 染 。ShaderEffect 仍 然 是 个 抽象 类 ， 它 束 是 
留 给 滤 锐 插件 开 友 人 员 的 接口 。 只 要 你 开 友 出 派生 目 ShaderEffec 的 效 来 
类 ， 列 人 束 可 以 直接 拿 来 用 。 

开 友 看 色 器 效果 需要 使 用 Pixel Shader 语 言 〈《 侧 与 与 Photoshop 一 
样 ， 也 是 PS) 和 一 些 DirectX 的 知识 ， 超 出 了 本 书 的 范围 。PS 的 最 新 挨 
本 是 3.0， 感 兴趣 的 读者 可 以 在 微软 的 官方 网 站 找到 它 的 SDK 和 开发 文 
档 。 微 软 PDC2008 和 PDC2009 的 视频 中 也 有 一 些 讲 解 ， 
http://windowsclient.net/wpf/ 中 也 可 以 找到 一 些 资 料 。 

对 于 大 多 数 WPF 开 及 人 员 来 说 ， 我 们 需要 的 是 现成 的 效 末 滤 锐 ， 所 
以 官方 的 滤 镜 包 可 以 从 这 里 下 载 : http://wpffx.codeplex.com。 解 压 下 载 
的 zip 文 件 ， 可 以 看 到 分 别 为 WPF 和 Silverlight 准 备 的 两 套 滤 氏 。 进 入 
WPF 文 件 夹 ，ShaderEffectLibrary 文 件 夹 里 的 项 目 底 是 效果 库 。 效 果 库 
的 使 用 方法 如 下 。 








首先 从 http://wpf.codeplex.com/releases/view/14962 下 载 Shader Effects 
BuildTask and Templates.zip， 解 压 zip 文 件 后 按 其 中 的 Readme 文 档 进行 
Ti WME. KEE GESORHJA4VE/ FRA (XU. UORESOR 
M HARER mE. MREFA CARIE Ea, (D RIAAN A 
境 。 检 验 安 装 是 否 成 功 的 办 法 是 局 动 Visual Studio, AA Æ @; u] Dre 
WPF Shader Effect Library 项 目 ， 如 图 12-14 所 示 。 


ec! WPF Custom Control Library Visual CË 


eu WPF Shader Effect Library C Visual C£ 


Visual C$ 





ect WPF User Control Library 


图 12-14 ”检查 安装 是 否 成 功 
新 建 一 个 WPF 解 决 方案 ， 把 ShaderEffectLibrary 中 的 项 目 添 加 进来 
(如 图 12-15 所 示 ) ， 并 为 WPF 项 目 添 加 对 WPFShaderEffectLibrary 项 目 
的 引用 ， 你 束 可 以 使 用 效 束 库 里 的 效 末 了 。 


OUTION EXDIOTET 
Lane] 
od Solution WpfApplicationl' (2 projects) 
a (9 WpfApplicationi 
Eaj Properties 
4 | References 
2 Microsoft.CSharp 
«2 PresentationCore 
CJ PresentationFramework 


LIO u i 


32] 


| ad Solution WpfApplicationl' (2 projects) um 
-— i 13 System.Core 
4 (| WpfApplicationi 
» [m Properties 
«3j References 
» (| Appxaml 


C System.Data 
2 System.Data.DataSetExtensions 
3 System. Xaml 
«C System. Xml 
«2 System. Xml Ling 
2 WindowsBase 
«C WPFShadertffectLibrary | 
» me Appxami 
Fighter.jpg 
4 e ManWindowxaml 
+] MainWindow.xaml.cs 
» (S| WPFShaderEffectLibrary 


á n MainWindow.xaml 
+ MainWindow.xaml.cs 


Ea Properties 
«4j References 

» [Lg EffectFiles 

^» Lg ShaderSource 
c#] EffectLibrary.cs 











图 12-15 ”添加 ShaderEffectLibrary 项 目 


问 项 目 中 添加 一 个 图 乒 ， 并 在 XAML 文 件 中 设置 其 Effect 属性 : 


«Window x:Class-" WpfA pplicationl.MainWindow" 
xmlns-"http:/schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmins:x-"http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:selibz"clr-namespace:ShaderEffectLibrary;assembly-ShaderEffectLibrary" 
Title" Main Window" Height-"240" Width-" 520" 

«Grid» 
«T--Layout--^ 
«Grid. ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition /> 
«fand. ColumnDefinitions? 
<l--Content--> 
<Image Source-" Fighter jpg" Margin="15" Grid.Column="0"> 
<Image.Effect> 
<l-- 日 市 效果 -> 
<DropShadowEffect BlurRadius="10" Opacity="0,75" /> 
</Image.Effect> 
«I Image? 
«Image Source" Fighter jpg" Margin-" 15" Grid.Column-" ] > 
«Image.Effect? 
<l-- 效 果 库 中 的 效 末 -> 
«selib;ZoomBlurEffect Center="0.5,0.5" BlurAmount="0.2" /» 
«/Image.Effect? 
«i Image 
</Grid> 
</Window> 


iR. fuuÉ12-16Pmn. 


| E MainWindow 





图 12-16 运行 效果 


仅 需 设置 几 个 属性 ， 层 次 分 明 、 动 感 十 足 的 图 厂 效 果 束 出 来 了 ! 这 
样 的 工作 既 可 以 由 设计 师 来 完成 ， 也 可 以 由 程序 员 来 完成 。 如 果 对 效果 
不 满意， 直接 在 XAML 文 件 中 修改 并 保存 即 可 ， 而 不 必 像 以 前 那样 再 用 
Photoshop 等 工 上 其 返工。 同时， 同一 张 源 图 厂 可 以 加 载 不 同 的 效果 ， 也 
不 必 像 以 前 那样 先 由 设计 师 制 作 多 个 网 片 再 添加 进 和 程序， 这样， 程序 的 
编译 结果 也 会 小 很 多 。 


123 图 形 的 变形 


当 你 看 到 “变形 (Transform) ”这 个 词 时 ， 首 先 会 想起 什么 ? Tu S. 
pm? 放大、 缩小 ? 还 是 .………. 看 形 金 刚 ? 其实，WPEF 中 的 “变形 ”一 词 合 
义 很 广 ， 尺 寸 、 人 位置、 坐标 系 比 例 、 旋 转角 上 度 等 的 变化 都 算是 变形 。 

WPF 中 的 变形 与 UI 元 系 是 分 开 的 。 举 个 例子 ， 你 可 以 设计 一 个 “ 癌 
左 讶 转 45 度 ”的 变形 ， 然 后 把 这 个 变形 赋值 给 不 同 UI 元 系 的 变形 控制 属 
性 ， 这 些 UI 元 素 束 都 癌 左 旋转 45 上 度 了 了 。 这 种 将 元 素 与 变形 控制 属性 分 开 
的 设计 方案 既 减 少 了 为 UIElement 关 添加 过 多 的 属性 ， 又 提高 了 变形 头 
实例 的 复 用 性 ， 可 谓 一 举 两 得 。 这 种 设计 思路 非常 从 合 全 略 模 式 中 “有 
一 个 ” 比 “ 是 一 个 ”更 加 灵活 的 思想 。 

控制 变形 的 属性 有 两 个 ， 分 别 是 : 

e RenderTransform: 呈现 变形 ， 定 义 在 UIElement 类 中 。 

e LayoutTransform: 布局 变形 ， 定 义 在 FrameworkElement 关 中 。 


为 FrameworkElement 派 后 上 和 目 UIElement， 而 控件 的 基 类 Control 类 
又 派生 目 FrameworkElement， 上 所 以 在 控件 级 别 两 个 属性 你 都 能 看 到 。 这 
两 个 属性 都 是 依赖 属性 ， 它 们 的 数据 类 型 都 是 Transform 抽 象 关 ， 也 束 
ùi, Transform MKE KIJ H HRANA TERE. Transform 
抽象 类 的 派生 类 有 如 下 一 些 : 

e MatrixTransform: 和 窍 阵 变形 ， 把 容纳 极 变 形 UI 元 素 的 官 形 顶点 
£ -V"PCAEBEUETI C. 

e RotateTransform: 旋转 变形 ， 以 给 定 的 点 为 旋转 中 心 ， 以 角 虔 
为 单位 进行 旋转 变形 。 

e ScaleTransform: KIREK, WEEREENS, Pr 


生 缩 放 效 果 。 
e SkewTransform: 拉 伸 变形 ， 可 在 模 回 和 纵 同 上 对 被 变形 元 系 进 
行 拉 伸 。 


e TranslateTransform: 偏 移 变形 ， 使 被 变形 元 系 在 横 同 或 纵 同 上 
偏 移 一 个 给 定 的 值 。 

e TransformGroup: 变形 组 ， 可 以 把 多 个 独立 变形 合成 为 一 个 变 
形 组 、 产 生 复 合 变 形 效 果 。 


12.3.1 呈现 变形 


IAE“ EME (Render Transform) "We? 相信 六 家 都 知道 什么 

是 “ 海 市 乓 楼 ” 吧 ! 远 远 望 去 ， 远 方 的 天 空中 束 序 着 一 座 城 市 ， 而 实际 上 
那 地 方 没 有 城市 ， 有 的 只 是 沙漠 或 海洋 ..….. 海 市 古 楼 的 成 因 是 密度 不 均 
的 空气 使 光线 产生 折射 ， 最 终 让 人 眼看 到 城市 的 影像 呈现 在 本 不 应 该 出 
现 的 位 置 一 一 这 束 是 城市 影像 的 呈现 出 现 了 变形 。WPF 的 
RenderTransform 属 性 就 是 要 起 到 这 个 作用 ， 让 UI 元 系 呈 现 出 来 的 属性 与 
它 本 来 的 属性 不 一 样 ! 比如 ， 一 个 按钮 本 来 处 在 Canvas 或 者 Grid 的 左上 
角 ， 而 我 可 以 使 用 RenderTransform 属 性 让 其 呈现 在 右 下 角 并 且 问 右 旋转 
25. 

观察 下 面 这 个 例子 : 





<Grid> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width=" Auto" /> 
<ColumnDefinition Width="*" /> 
</Grid.ColumnDefinitions> 
<Grid.RowDefinitions> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="*" /> 
</Grid.RowDefinitions> 
«Button Width="80" HorizontalAlignment="Left" VerticalAlignment-" Top" 
Hetght-"80" Content-"Hello"» 
«Button.RenderTransform» 
<!-- 复 合 变形 -> 
<TransformGroup> 
<RotateTransform CenterX="40" CenterY="40" Angle="45" /> 
<TranslateTransform X="300" Yz"200" /> 
</ TransformGroup> 
«[Button.RenderTransform» 
<iButton> 
<JGnd> 


在 布局 Grid 里 ， 我 分 划 了 两 行 两 列 ， 并 且 第 一 行 的 行 高 、 第 一 列 的 
列 宽 都 由 Button 来 决定 。 同 时 ， 我 为 Button 的 RenderTransform 设 置 了 一 
个 复合 变形 ， 使 用 TransformGroup 将 一 个 偏 移 变 形 和 一 个 旋转 变形 组 合 
在 一 起 。 偏 移 变 形 将 Button 的 呈现 (而 不 是 Button 本 结 ) 回 右 移动 300 像 
zx. [M FÉES: 旋转 变形 将 Button 的 呈现 同 右 旋转 了 45°*。 在 窗 
体 设 计 器 里 ， 我 们 可 以 清晰 地 看 到 Button 本 喘 的 位 置 并 没有 改变 〈 第 一 
行 和 第 一 列 没 有 变化 ) ， 但 Button 却 出 现在 了 右 下 (300,200) 的 位 置 ， 并 
同 右 旋转 了 45*， 如 图 12-17 所 示 。 
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图 12-17 WF s PME 
运行 程序 ， 用 户 看 到 的 结果 如 图 12-18 所 示 。 


| 8' MainWindow 





图 12-18 运行 效果 

用 户 并 不 能 穴 沉 到 究竟 是 控件 本 映 的 位 置 、 角 上 度 发 生 了 改变 ， 还 是 
呈现 的 位 置 与 角度 发 生 了 改变 。 

为 什么 需要 呈现 变形 呢 ? 答案 是 : 为 了 效率 ! 在 窗 体 上 移动 UI 元 素 
本 里 会 导 仅 窗 体 布局 的 改变 ， 而 窗 体 布局 的 每 一 个 (哪怕 是 细微 的 ) 变 
化 都 将 导致 所 有 窗 体 元 系 的 尺寸 测算 函数 、 位 置 测 算 函 数 、 呈 现 疯 数 等 
的 调用 ， 造 成 系统 资源 占用 激增 、 程 序 性 能 陡 降 。 而 使 用 呈现 变形 则 不 
会 迪 到 这 样 的 问题 ， 呈 现 变 形 只 改变 元 系 “ 出 现在 哪里 *"， 所 以 不 罕 扯 布 
局 的 改变 、 只 涉及 窗 体 的 重 绘 。 所 以 ， 当 你 需要 制作 动画 的 时 候 ， 请 切 
记 要 使 用 RenderTransform 。 


12.3.2 ”布局 变形 


与 呈现 变形 不 同 ， 布 局 变形 会 影响 贸 体 的 布局 、 导 人 致密 体 布局 的 午 
新 测算 。 因 为 窗 体 布局 的 重新 测算 和 绘制 会 影响 程序 的 性 能 ， 所 以 布局 
变形 一 般 只 用 在 静态 变形 上 ， 而 不 用 于 制作 动画 。 

考虑 这 样 一 个 需求 : 制作 一 个 文字 纵 同 排列 的 浅 是 色 标 题 芒 。 如 末 


我 们 使 用 呈现 变形 ， 代 人 码 如 下 : 


<Grid> 
<|--Layout--> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width=" Auto" /> 
<ColumnDefinition Width="*" /> 
«/Grid.ColumnDefinitions? 
<|--Content--> 
«Grid x:Name="titleBar" Backeround="LightBlue"> 
<TextBlock Text-" Hello Transformer!" FontSize- 24" 
HorizontalAlignment-"Left" VerticalAlignment-" Bottom 
<TextBlock. Render Transform 
«Rotate Transform Angle-"-90" /> 
«/TextBlock.RenderTransform? 
«/TextBlock» 
«Grid» 
«Gnd» 
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图 12-19 ”设计 器 显示 效果 


尽 党 我 们 让 显示 文字 的 TextBox“ 看 起 来 "旋转 了 90"， 但 TextBox 本 
刁 并 没有 改变 ， 改 变 的 只 是 它 的 显示 ， 所 以 ， 它 的 真实 宽度 仍然 把 宽度 
设 为 Auto 的 第 一 列 撑 得 很 窝 。 显 然 这 不 是 我 们 希望 看 到 的 。 

分 析 需 求 ， 我 们 实际 上 需要 的 是 静态 改变 TextBox 的 布局 ， 因 此 应 
该 使 用 LayoutTransform。 仪 需 对 上 面 的 代码 做 一 处 改动 : 


«Grid» 
<|--Layout--> 
<Grid.ColumnDefinitions> 
<ColumnDefinition Width=" Auto" /> 
<ColumnDefinition Width="*" /> 
</Grid.Column Definitions> 
<|--Content--> 
«Grid x:Name-"titleBar" Background= LightBlue > 
<TextBlock Text-" Hello Transformer!" FontSize-" 24" 
Horizontal Alignment-"Left" VerticalAlignment-" Bottom" 
«TextBlock.LayoutTransform- 
«RotateTransform Angle-"-90" /> 
«/TextBlock.LayoutTransform? 
«/TextBlock» 
«Gnd» 
</Grid> 


设 症 大 中 的 效 末 如 图 12-20 所 示 。 


lello Transformer! 





图 12-20 ”运行 效果 
12.4 动画 


何 为 动画 ? 动画 日 然 束 是 “会 动 的 画 ”"。 所 谓 “ 会 动 * 不 光 指 位 置 会 移 
动 ， 还 包括 角度 的 旋转 、 颜 色 的 变化 、 透 明度 的 增 减 等 。 细 心 的 读者 一 
定 已 经 发 现 ， 动 画 本 质 就 是 在 一 个 时 间 段 内 对 象 位 置 、 角 度 、 颜 色 、 透 
明度 等 属性 值 的 连续 变化 。 这 些 属 性 中 ， 有 些 是 对 象 自 身 的 属性 ， 有 些 
则 是 上 一 节 所 学 的 图 形变 形 的 属性 。 有 一 点 需要 注意 ，WPF 规 定 ， 可 以 
用 来 制作 动画 的 属性 必须 是 依赖 属性 。 

变化 即 是 运动 。“ 没 有 脱离 运动 的 物体 ， 也 没有 脱离 物体 的 运动 ”， 
唯物 主义 哲学 如 是 说 。WPE 的 动画 也 是 一 种 运动 ， 这 种 运动 的 主体 就 是 
各 种 UI 元 素 ， 这 种 运动 本 续 束 是 施加 在 UI 元 素 上 的 一 些 Timeline 派 生 类 
的 实例 。 在 实际 工作 中 ， 我 们 要 做 的 事情 往往 就 是 先 设 计 好 一 个 动画 构 
忆 、 用 一 个 Timeline 派 生 类 的 实例 加 以 表达 ， 最 后 让 某 个 UI 元 系 来 执行 
这 个 动画 、 完 成 动画 与 动画 主体 的 结合 。 

简单 的 动画 由 一 个 元 素来 完成 束 可 以 了 ， 束 像 一 个 演员 的 独角戏 ， 


WPF 把 简单 动 男 称 为 AnimationTimeline。 复 杂 的 〈 即 并 行 的 、 复 合 的 ) 
动 田 束 需要 UI 上 的 多 个 元 系 协 同 完成 ， 束 像 电影 中 的 一 上 段 场景 。 复 灯 动 
男 的 协同 包括 有 哪些 UI 元 系 参 与 动画 、 每 个 元 素 的 动画 行为 是 什么 、 动 
男 何 时 开始 何 时 结束 等 。WPF 把 一 组 协同 的 动画 也 称 为 Storyboard。 
Timeline、AnimationTimeline 和 Storyboard 欠 天 系 如 图 12-21 所 示 。 


Timeline 


TimelineGroup Animation Timeline 


Parallel Timeline e Rh zB J^ ZŠ 





storyboard 
图 12-21 关系 图 


本 节 内 容 分 为 两 部 分 ， 移 研究 如 何 设计 独立 的 简单 动画 ， 册 研 各 如 
何 把 简单 动 国 组 合 在 一 起 形成 场景 。 


12.4.4 šj ER SZ 5) H] 


前 面 说 过 ， 动 画 就 是 “会 动 的 画 ”， 而 这 个 “会 动 ” 指 的 束 是 能 够 让 UI 
元 素 或 元 素 变 形 的 某 个 属性 值 产生 连续 变化 。 任 何 一 个 属性 都 有 自己 的 
数据 类 型 ， 比 如 UIElement 的 Width 和 Height 属 性 为 Double 类 型 、Window 
的 Title 属 性 为 String 类 型 。 几 乎 针对 每 个 可 能 的 数据 类 型 ，WPF 的 动画 
子 系 统 部 为 其 准备 了 相应 的 动画 类 ， 这 些 动画 类 均 派 生日 
AnimationTimeline。 它们 包括 : 

e BooleanAnimationBase 
ByteAnimationBase 
CharAnimationBase 
ColorAnimationBase 
DecimalAnimationBase 
DoubleAnimationBase 
Int6AnimationBase 
Int32AnimationBase 
Intó4AnimationBase 


MatrixAnimationBase 
ObjectAnimationBase 
Point3DAnimationBase 
PointAnimationBase 
QuaternionAnimationBase 
RectAnimationBase 
Rotation3DAnimationBase 
sSingleAnimationBase 
SizeAnimationBase 
o5tringAnimationBase 
ThicknessAnimationBase 
Vector3DAnimationBase 
e VectorAnimationBase 
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整 的 情况 下 ， 这 些 抽 和 象 基 类 又 能 派生 出 3 种 具体 动画 ， 即 简单 动画 、 关 
刍 帆 动画 、 沿 路径 运动 的 动画 。 例 如 DoubleAnimationBase， 它 完整 地 派 
生出 了 3 个 具体 动画 ， 如 图 12-22 所 示 。 


DoubleAnimationBase 





DoubleAnimation DoubleAnimationUsingKeyFrames DoubleAnimationUsingPath 
[12-22 DoubleAnimationBase 派 生出 的 具体 动画 


而 针对 于 int 类 型 属性 的 Int32AnimationBase 只 派生 出 Int32Animation 
和 Int32AnimationUsingKeyFrames 两 个 具体 动 男 类 。 
BooleanAnimationBase 和 CharAnimationBase 的 派生 类 则 更 少 一 ”只 有 关 
TEMSE. 

为 在 WPF 动 画 系统 中 Double 类 型 的 属性 用 得 最 多 ， 而 且 
DoubleAnimationBase 的 派生 类 也 最 完整 ， 所 以 本 节 只 讲述 
DoubleAnimationBase 的 派生 类 。 学 习 完 这 个 类 ， 其 他 动画 类 型 亦 可 触 类 

1. 人 简单 线性 动力 

所 谓 “ 人 简单 线性 动画 ? 丈 是 指 仅 由 变化 起 点 、 变 化 终点 、 变 化 幅度 、 
变化 时 间 4 个 要 系 构 成 的 动画 。 

e 变化 时 间 (Duration 属 性) : 必须 指定 ， 数 据 类 型 为 Duration。 

e 变化 终点 〈To 属 性 ) : 如 果 没 有 指定 变化 终点 ， 程 序 将 采用 上 


一 次 动画 的 终点 或 默认 值 。 
pag 变化 外 度 By 属 性》， 如 果 同时 指定 了 变化 终点 ， 变 化 幅度 交 
t$⁄ €. S o 

° 变化 起 点 (From 属 性 ) : 如 果 没 有 指定 变化 起 点 则 以 变化 目标 
属性 的 当前 值 为 起 点 。 

让 我 们 分 析 一 个 简单 实例 。 例 子 的 XAML 代 码 如 下 : 


<Grid> 
«Button Content="Move!" HorizontalAlignment-" Left" VerticalAlignment="Top" 
Width-"60" Height-"60" Click-"Button. Click"? 
«Button. Render Transform> 
<TranslateTransform x:Name="tt" X="0" Y="0" /> 
</Button. RenderTransform 
</Button> 


«Gnd» 


用 户 界 面 上 只 包含 一 个 Button， 这 个 Button 的 RenderTransform 属性 
值 是 一 个 名 为 tt 的 TranslateTransform 对象 ， 改 变 这 个 对 象 的 X 和 Y 值 束 会 
让 Button 的 显示 位 置 (而 不 是 真实 位 置 ) 变化 。Button 的 Click 事 件 处 理 
ds NIB HH F: 


private void Button Click(object sender, RoutedEventArgs e) 


| 
| 


DoubleAnimation daX = new Double Animation): 


DoubleAnimation daY = new DoubleAnimation(): 


I| RERA 
daX.From = 0D: 
daY.From = 0D: 


I| 指定 终点 

Random r = new Random(); 
daX.To = r.NextDouble() * 300; 
daY.To = r.NextDouble() * 300; 


Duration duration = new Duration( TimeSpan.FromMilliseconds(300)); 
daX.Duration = duration: 


daY.Duration duration: 


/动画 的 主体 是 Translate Transform 变形 ， 而 非 Button 
this.tt.BeginAnimation(TranslateTransform. XProperty, daX); 
this.tt. BeeinAmimation(TranslateTransform. Y Property, daY); 
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用 DoubleAnimation 来 使 之 产生 变化 。 代 码 中 声明 了 daX 和 daY 两 个 
DoubleAnimation 杰 量 并 分 别 为 之 创建 引用 实例 。 接 下 来 的 代码 依次 为 
它们 设置 了 起 始 值 、 终 止 值 、 变 化 时 间 。 最 后 ， 调 用 BeginAnimation 方 
法 ， 让 daX 作 用 在 TranslateTransform 的 XProperty 依 赖 属 性 上 、 让 daY 作 
FH t£ TranslateTransform HJ Y Property f W Je& TEE - 
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器 窗 体 右 下 长 宽 不 超出 300 像 素 的 窍 形 内 的 茶点 运动 ， 完 成 运动 的 时 长 
是 300 坚 秒 。 效 来 如 图 12-23 所 示 。 


DoubleAnimation ' DoubleAnimation 








指定 起 只 不 指定 起 品 
图 12-23 ”运行 程序 按钮 运动 效果 


注意 
这 段 代 码 有 以 下 几 处 值得 注意 的 地 方 : 
° 为 指定 了 daX 和 daY 的 起 始 值 为 0， 所 以 每 次 按钮 都 会 < 跳 " 回 窗 体 的 左上 角 开 始 动 
男 。 如 果 想 让 按钮 从 当前 位 置 开 始 下 一 次 动画 ， 只 需要 把 “daX.From=0D;” 和 “daY.From=0D;” 两 
Ah RES ER BI n] 

e 尺 管 表现 出 来 的 是 Button 在 移动 ， 但 DoubleAnimation 的 作用 目标 并 不 是 Button 而 是 
TranslateTransform 实 例 ， 因 为 TranslateTransform 实 例 是 Button 的 RenderTransform 属 性 值 ， 所 以 
Button“ 看 上 去 ”是 移动 了 。 

e 有 前面 说 过 ， 能 用 来 制作 动画 的 属性 必须 是 依赖 属性 ，TranslateTransform 的 XProperty 利 
YProperty 束 是 两 个 依赖 属性 。 

e UIElement 和 Animatable 两 个 类 都 定义 有 BeginAnimation 这 个 方法 。TranslateTransform 
派生 目 Animatable 类 ， 上 所 以 具有 这 个 方法 。 这 个 方法 的 调用 者 束 是 动画 要 作用 的 目标 对 象 ， 两 
个 参数 分 别 指明 被 作用 的 依赖 属性 (TranslateTransform. XProperty 和 
TranslateTransform.YProperty) 和 设计 好 的 动画 〈daX 和 daY) 。 可 以 猜想 ， 如 果 需 要 动画 改变 
Button 的 宽度 或 高 度 〈 这 两 个 属性 也 是 Double 类 型 ) ， 也 应 该 先 创 建 DoubleAnimation 实 例 ， 然 
后 设置 起 止 值 和 动 男 时 间 ， 最 后 调用 Button 的 BeginAnimation 方 法 、 使 用 动画 对 象 影 啊 





Button.WidthProperty 和 Button.HeightProperty。 


U RFE SS AD EE SR B TR CAE KIX AE : 


private void Button. Click(object sender, RoutedEventArgs e) 
| 
DoubleAnimation daX = new DoubleAnimation( ); 


DoubleAnimation daY = new DoubleAnimation(); 


I| 指定 幅度 
daX.By = 100D; 
daY.By = 100D; 


I| REHE 
Duration duration = new Duration(TimeSpan.FromMilliseconds(300)); 
daX. Duration = duration; 


daY.Duration = duration; 
I| RE HER TranslateTransform 变形 ， 而 非 Button 


this.tt.BeginAnimation(TranslateTransform. XProperty, daX); 
this.tt. BeginAnimation(TranslateTransform. Y Property, daY; 


每 次 单 击 按 扭 ， 按 钮 都 会 同窗 体 的 右 下 角 移 动 。 效 朱 如 图 12-24 所 


DoubleAnimation 














图 12-24 ”按钮 移动 效果 


2. 高 级 动画 控制 

使 用 From、To、By、Duration 几 个 属性 进行 组 合 束 已 经 可 以 制作 很 
多 不 同 效果 的 动 男 了 ， 然 而 WPEF 动 画 系统 提供 的 控制 属性 远 不 止 这 些 。 
如 果 想 制作 更 加 复杂 或 允 真 的 动画 ， 还 需要 使 用 以 下 一 些 效 果 。 


Wii, 介 于 0.0 和 1.0 之 间 , 与 DecelerationRatio 之 和 | su 
Acceleraiontato | e rn T O0 AE LO <, | 机 放下 





| 速 速 率 , TFT 00 和 1.0 之 间 , 5 AccelerationRatio Z% | uuu 
DecelerationRatio cx AE GUN Bana nRatio 之 和 模拟 汽车 刹车 


SpeedRatio 动画 实际 播放 速度 与 正常 速度 的 比 但 快 进 播 放 、 慢 动作 





FR 


属性 应 用 举例 
AutoReverse 是 否 以 相反 的 动画 方式 从 终止 值 退 回 起 始 但 | 倒退 播放 


动画 的 重复 行为 ， 取 0 为 不 播放 ,使 用 double 类 型 但 可 控 z. 
| í 1] » L | 
a 制 循 环 次 数 ， 取 RepeatBehaviorForever 为 永远 循环 MER 


BeginTime 正式 开始 播放 前 的 等 待 时 间 
FasingFunction ET SQUE 


对 于 这 些 属性 ， 
以 产生 很 多 旦 想不到 的 效果 。 
在 这 些 属 性 中 ，EasingFunction 是 一 个 扩展 性 非常 强 的 属性 。 它 的 


取 值 是 IEasingFunction 接 口 类 型 ， 而 WPF 目 市 的 IEasingFunction 派 生 类 


束 有 十 多 种 ， 每 个 派生 类 都 能 产生 不 同 的 结束 效果 。 比 如 BounceEase 可 
以 产生 丘 乓 球 弹 跳 式 的 效果 ， 我 们 可 以 直接 拿 来 使 用 而 不 必 花 精力 去 亲 


目 创作 。 
如 未 把 前 面 例 子 的 代 但 改 成 这 样 : 


多 个 动画 之 前 的 协同 
SENA 
行 组 合 往往 可 

















private void Button Click(object sender, RoutedEventArgs e) 


| 
DoubleAnimation daX = new Double Animation(): 
DoubleAnimation daY = new DoubleAnimation(); 
l| BM 
BounceEase be = new BounceEase(); 
be.Bounces = 3; // 弹跳 3 次 
be.Bounciness = 3; // WEER, EEA EREE 
daY.EasingFunction = be; 
l| 指定 终点 
daX.To = 300; 
daY.To = 300; 
I| 指定 时 长 
Duration duration = new Duration( TimeSpan.FromMilliseconds(2000)): 
daX.Duration = duration; 
daY.Duration = duration; 
I| 动画 的 主体 是 TranslateTransform 变形 ， 而 非 Button 
this.tt. BeginAnimation(TranslateTransform. XProperty, daX); 
this.tt.BeginAnimation(Translate Transform. Y Property, daY ); 


运行 效 来 如 图 12-25 所 示 。 



































DoubleAnimation 





图 12-25 ”按钮 运动 曲线 


3. 天 键 帧 动画 

动画 是 UI 元 素 属 性 连续 改变 所 产生 的 视觉 效果 。 属 性 每 次 细微 的 变 
化 都 会 产生 一 个 新 的 了 画面， 每 个 新 男 面 承 称 为 一 “ 帧 ”， 帧 的 连续 播放 惑 
产生 动画 效果 。 如 同 电影 一 样 ， 单 位 时 间 内 播放 的 帧 数 越 多 ， 动 画 的 效 
果 束 越 细 人 有致 。 前 面 讲 到 的 简单 动画 只 设置 了 起 点 和 终点 ， 之 间 的 动画 巾 
都 是 由 程序 计算 出 来 并 绘制 的 ， 程 序 员 无 法 进行 控制 。 关 键 帧 动画 则 人 允 
许 程序 员 为 一 段 动画 设置 几 个 “里 程 碑 ”， 动 画 执 行 到 里 程 碑 所 在 的 时 间 
点 时 ， 被 动画 所 控制 的 属性 值 也 必须 达到 设 定 的 值 ， 这 些 时 间 线 上 
的 “里 程 碑 * 就 是 关键 帧 。 

思考 这 样 一 个 需求 : 我 想 让 一 个 Button 在 单 击 后 用 900 毫 秒 的 时 长 
ic 

12-26 所 示 。 


| Key Frames 























图 12-26 ”按钮 “2” 字 形 移动 路 线 效 果 


如 果 我 们 不 知道 有 关键 帧 动画 可 用 而 只 使 用 简单 动画 ， 那 么 我 们 需 
要 创建 若干 个 简单 动画 分 别 控制 TranslateTransform 的 X 和 Y， 比 较 环 手 
的 是 需要 控制 这 些 动 男 之 间 的 协同 。 协 同 蛇 略 有 了 两 种 ， 一 种 是 靠 时 间 来 
协同 ， 也 就 是 设置 后 执行 动画 的 BeginTime 以 等 竺 前面 动画 执行 完毕 ， 

态 一 种 是 菲 事 件 协 同 ， 也 吏 是 为 先 执行 的 动 男 谎 加 Completed 事 件 处 理 
偶 ， 在 事件 处 理 器 中 开始 下 一 段 动 画 。 因 为 是 多 个 动画 协同 ， 所 以 在 动 
国 需 要 改变 的 时 候 ， 代 码 的 改动 也 会 比较 大 。 

使 用 关键 帆 动 画 情 况 束 会 大 有 改观 我 们 只 需要 创建 两 个 
DoubleAnimationUsingKeyFrames 实 例 ， 一 个 控制 TranslateTransform 的 X 
属性 、 另 一 个 控制 TranslateTransform 的 Y 属 性 即 可 。 每 个 
DoubleAnimationUsingKeyFrames 各 拥有 三 个 关键 帆 用 于 指明 X 或 Y 在 三 
个 时 间 点 《两 个 扔 点 和 终点 ) 应 该 达到 什么 样 的 值 。 

程序 的 XAML 代 码 如 下 : 





«Grid 
«Button Content-" Move" VerticalAlignment- "Top" HorizontalAlignment-" Left" 
Width-" 80" Height-"80" Click-"Button Click"? 
«Button. Render Transform> 
«Translate Transform x:Name="tt" X="0" Y="0" /> 
</Button.RenderTransform> 
</Button> 
<JGnd> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button_Click(object sender, RoutedEVentArgs e) 

| 
DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames(); 
DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames(); 


| 设置 动画 总 时 长 
dakX. Duration = new Duration(TimeSpan.FromMilliseconds(900)); 
dakY.Duration = new Duration( TimeSpan.FromMilliseconds(900)); 


I| aE RREN 

LinearDoubleKeyFrame x kf. 1 = new LinearDoubleKeyFrame(); 
LinearDoubleKeyFrame x kf 2 = new LinearDoubleKeyFrame(): 
LinearDoubleKeyFrame x kf 3 7 new LinearDoubleKeyFrame(): 


x kf I.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromMilliseconds(300)); 
x kf I. Value = 200; 

x kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
x kf 2. Value = 0; 

x kf 3.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromMilliseconds(900)); 
x kf 3. Value = 200; 


dakX.KeyFrames.Add(x kf 1); 
dakX.KeyFrames.Add(x kf 2); 
dakX.KeyFrames.Add(x kf 3); 


LinearDoubleKeyFrame y kf | = new LinearDoubleKeyFrame(); 
LinearDoubleKeyFrame y kf 2 = new LinearDoubleKeyFrame(); 
LinearDoubleKeyFrame y kf 37 new LinearDoubleKeyFrame(); 


y kf LKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)); 
y kf 1.Value = 0; 

y kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
y kf 2.Value = 180; 

y kf 3.KeyTime = KeyTime.FromTimeSpan( TimeSpan.FromMilliseconds(900)); 
y kf 3, Value = 180; 


dakY.KeyFrames.Add(y kf 1): 
dakY.KeyFrames.Add(y kf 2); 
dakY.KeyFrames.Add(y kf 3); 


/ trahi 

this.tt. BeginAnimation( Translate Transform. XProperty, dakX ); 

this.tt. BegrmAnimation( Translate Transform. Y Property, dakY ); 

| 
在 这 组 关键 帧 动画 中 ， 我 们 使 用 的 是 最 简单 的 关键 帧 
LinearDoubleKeyFrame， 这 种 关键 帆 的 特点 就 古 只 二 你 给 定时 间 点 
(KeyTime 属 性 ) 和 到 达 时 间 点 时 目标 属性 的 伸 (Value 属 性 ) 动画 残 会 

让 目标 属性 值 在 两 个 关键 帧 之 间 匀 速 变 化 。 比 如 这 两 句 代 码 : 


x kf LKeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300)); 
x kf 1.Value = 200; 

x kf 2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600)); 
x kf 2. Value = 0; 


x kf 1 关键 上 病 处 在 时 间 线 300 坚 秒 处 ， 目 标 属 性 值 在 这 一 时 刻 必 须 
达到 200( 是 什么 属性 这 时 并 不 知道 ， 但 要 求 这 个 属性 值 到 这 个 时 间 一 
定 达 到 200) ， 类 似 ，x_kf_2 在 时 间 线 上 的 位 置 是 600 训 秒 处 ， 目 标 属 性 
的 值 为 0。 当 动画 开始 执行 后 ， 程 序 会 目 动 计算 出 目标 属性 在 这 两 个 关 
刍 帆 之 则 的 匀速 变化 。 

前 面 的 代码 中 ， 为 天 键 帧 的 KeyTime 属 性 使 用 了 
KeyTime.FromTimeSpan 静 态 方法 ， 这 样 可 以 得 到 一 个 绝对 时 间 点 。 使 
用 KeyTime.FromPercent 静 态 方 法 则 可 以 获得 以 折 分 比 计 算 的 相对 时 间 
点 ， 程 序 将 整个 关键 帧 动画 的 时 长 (Duration ) 视 为 100% 。 我 们 可 以 把 
前 面 的 代码 更 改 为 这 样 : 


x kf l.KeyTime = KeyTime.FromPercent(0.33): 
x kf 1.Value = 200; 

x kf 2.KeyTime = KeyTime.FromPercent(0.66): 
x kf 2. Value = 0; 

x kf 3.KeyTime = KeyTime.FromPercent( 1.0); 
x kf 3. Value = 200; 

Us 


之 后 无 论 你 把 dakX 的 Duration 改 为 多 少 ， 三 个 关键 帧 都 会 将 整个 动 
国 分 割 为 均等 的 三 段 。 

4. 特殊 的 天 键 帧 

DoubleAnimationUsingKeyFrames 的 KeyFrames 必 性 的 数据 次 型 是 
DoubleKeyFrameCollection， 此 集合 类 可 接收 的 元 系 类 型 为 
DoubleKeyFrame。DoubleKeyFrame 是 一 个 抽象 类 ， 前 面 使 用 的 
LinearDoubleKeyFrameJ3il Æ €E MIIKE Z —. DoubleKeyFramelf] Pr 8 JK 
生 类 如 下 : 

e LinearDoubleKeyFrame: 线性 变化 关键 帧 ， 目 标 属 性 值 的 变化 
古 直 线性 的 、 均 匀 的 ， 即 变化 速率 不 变 。 

e DiscreteDoubleKeyFrame: 不 连续 变化 关键 帧 ， 目 标 属 性 值 的 弯 
化 十 跳跃 性 的 、 跃 迁 的 。 

e SplineDoubleKeyFrame: 样 条 函数 式 变 化 关键 师 ， 目 标 属 性 值 
HJ AE LR E fe 2 USE Hil Ze 

e EasingDoubleKeyFrame: 绥 冲 式 变 化 天 键 帧 ， 目 标 属 性 值 以 茶 
种 缓冲 形式 变化 。 

4 个 派生 类 中 最 第 用 的 古 


SplineDoubleKeyFrame (SplineDoubleKeyFrame rj EJ £5 4 À 
LinearDoubleKeyFrame) 。 使 用 P ou 5 DJE 77 (8 3t 
制作 非 匀 速 动画 ， 因 为 它 使 用 一 条 贝 暑 尔 曲 线 来 控制 目标 属性 值 的 变化 
速 宗 。 这 条 用 于 控制 变化 速 京 的 贝 团 尔 曲 线 的 起 点 是 (0,0) 和 (1,1)， 人 分别 
映射 看 目 " 性 的 变化 起 点 和 变化 终点 ， 意 思 是 目标 属性 值 由 0% 变 化 
到 100%。 这 条 贝 SSK 曲线 有 两 个 控制 ControlPoint1 和 
ControlPoint2, $ E Ul 3EZK HH Ze Moto pa 17 7c I] ControIPoint1 H5 77 W 
BÚ EE, H mlControlPoint2 WA [H] BJ EE. Ee: 83S 2 ei, 形成 一 条 平 请 的 
曲线 。 如 果 设 置 ControlPoint1 和 ControlPoint2 的 横 纵 坐标 值 相等 ， 比 如 
(0,0)、(0.5,0.5)、(1,1)， 则 贝 窟 尔 曲 线 成 为 一 条 直线 ， 这 时 候 
SplineDoubleKeyFrame 与 LinearDoubleKeyFrame 征 等 价 的 。 当 控制 点 的 
横 纵 坐标 不 相等 时 ， 贝 塞 尔 曲 线 葡 能 出 现 很 多 变化 。 如 图 12-27 所 示 下 
面 这 些 图 是 贝 野 尔 曲线 控制 点 处 在 典型 位 置 时 形成 的 速率 曲线 ，x1、y1 
是 ControlPoint1 的 横 纵 坐标 ，x2、y2 是 ControlPoint2 的 横 纵 坐标 : 








图 12-27 速率 曲线 


下 和 面 是 SplineDoubleKeyFrame 关 键 帧 的 一 个 实例 。 程 序 的 XAML 代 
但 如 下 : 


<Grid> 
«Button Content="Move" VerticalAlignment="Top" HorizontalAlignment=" Left" 
Width="80" Height="80" Click-"Button. Click"? 
<Button.RenderTransform> 
<TranslateTransform x:Name="tt" X="0" Y="0" /> 
</Button.RenderTransform> 
</Button> 
«ond» 
Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 

| 
中 创建 动画 
DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames( J; 
dakX. Duration = new Duration( TimeSpan.FromMilliseconds(1000)): 


/ 创建 、 添 加 关键 由 

SplineDoubleKeyFrame kf = new SplineDoubleKeyFrame(): 
kf.KeyTime = KeyTime.FromPercent( |): 

kf Value = 400; 

KeySpline ks = new KevSpline(); 

ks.ControlPointl = new Point(0, 1); 

ks.ControlPoint2 = new Point, 0); 

kf. KevSpline = ks; 

dakX. KeyFrames.Add(kf); 


| 执行 动画 
this.tt. BeeinAnimation( Translate Transform. XProperty, dakX ); 


A Se DL LE] o E f] Button] MAAE VEButtonféi [8] 32 2/] «— EA JJ 
igi HE — S KE li, ix^ M Bf HIIT]XeSplineDoubleKeyFrame. 4614 
速率 控制 曲线 的 两 个 控制 点 分 别 是 (0,1) 和 (1,0)， 与 图 12-17 中 的 最 后 一 幅 
一 仇 ， 因 此 ， 目 标 属性 值 会 以 “快慢 -=> 快 ” 的 形式 变化 。 程 序 的 执行 效 


果 如 图 12-28 所 示 。 





Spline Key Frames 


Move 




















图 12-28 ”程序 执行 效果 


5. 路 任 动 田 

如 何 让 目标 对 象 治 痢 一 条 给 定 的 路 径 移 动 呢 ? 答案 是 使 用 
DoubleAnimationUsingPath 类 。DoubleAnimationUsingPath 需 要 一 个 
PathGeometry 来 指明 移动 路 径 ，PathGeometry 的 数据 信息 可 以 用 XAML 
的 Path 语 法 书写 〈 详 见 前 面 章 节 ) 。PathGeometry 的 另 一 个 重要 属性 是 
Source，Source 属 性 的 数据 类型 是 PathAnimationSource 枚 举 ， 枚 举 值 可 
取 X、Y 或 Angle。 如 末路 径 动 男 Source 属 性 的 取 仁 是 
PathAnimationSource.X, X UE XX a) RE BJ xe HH 2 E RE— ka fs AA ER 
的 变化 ， 如 有 果 路 径 动 男 Source 属 性 的 取 值 是 PathAnimationSource.Y， 意 
味 看 这 个 动画 关注 的 是 曲线 上 每 一 点 纵 坐 标的 变化 ;如果 路 和 任 动画 
Source 属 性 的 取 值 是 PathAnimationSource.Angle， 意 味 着 这 个 动画 关注 
的 是 曲线 上 每 一 点 处 切线 方 回 的 变化 。 

下 和 面 这 个 示例 是 让 一 个 Button 沿 厦 一 条 由 到 尔 曲线 做 波浪 形 运 动 。 
程序 的 XAML 代 码 如 下 : 


«Grid x:Name="LayoutRoot"> 
«Grid. Resources 
<[-- 移 动 路 径 --> 
«PathGeometry x:Key="movingPath" Figures-"M 0,150 C300,-100 300,400 600,120" /> 
</Grid.Resources> 
«Button Content="Move" HorizontalAlignment-" Left" VerticalAlignment-" Top" 
Width-" 80" Height-" 80" Click-"Button Click"? 
«Button. Render Transform> 
<TranslateTransform x:Name="tt" X="0" Y="0" /> 
</Button.RenderTransform> 
</Button> 
</Grid> 


Button 的 Click 事 件 处 理 器 代码 如 下 : 


private void Button Click(object sender, RoutedEventArgs e) 


Il 从 XAML 代码 中 获取 移动 路 径 数据 
PathGeometry pg = this.LayoutRoot.FindResource( movingPath") as PathGeometry; 
Duration duration = new Duration(TimeSpan.FromMilliseconds(600)); 


Ii OEZ 

DoubleAnimationUsingPath dapX = new DoubleAnimationUsingPath(); 
dapX.PathGeometry = pg; 

dapX.Source = PathAnimationSource.X; 


dapX. Duration = duration; 


DoubleAnimationUsingPath dapY = new DoubleAnimationUsingPath(); 
dapY.PathGeometry = pg; 

dapY. Source = PathAnimationSource.Y: 

dapY.Duration = duration; 


1 执行 动画 
this.tt,. BeginAnimation( Translate Transtorm. XProperty, dapX ); 
this.tt. BeginAnimation(Translate Transform. Y Property, dapY ): 


KISRA 4S n] EA BIS JII EI 8) 3 [BUR I PI EE fI AR : 


! 目 动 退回 、 未 远 循环 

dapX.AutoReverse = true; 

dapX.RepeatBehavior = RepeatBehavior.Forever; 
dapY.AutoReverse = true; 


dapY.RepeatBehavior = RepeatBehavior.Forever; 


程序 的 运行 效 末 如 图 12-29 所 示 。 


8 ' Path Animation 




















图 12-29 ”运行 效果 
12.4.2 JE 


场景 〈Storyboard) 4LieJFfT4441 HJ— 28218 CB TEL UEFA BJ Cë pi 
动 国 则 是 串 行 执行 的 一 组 动 男 ) 。 

如 果 你 是 一 位 导演 ， 当 你 对 照 剧 本 构思 一 个 场景 的 时 候 脑 子 里 想 的 
一 定 是 应 该 有 多 少 演员 参与 这 个 场景 、 他 们 都 是 什么 演员 、 主 角 / 配角 
/ 群众 演员 分 别 什么 时 候 出 场 、 每 个 演员 应 该 说 什么 做 什么 ....……. 演员 具 
体 用 谁 ， 由 场景 的 需要 来 决定 。 到 开机 的 时 候 ， 一 声 令 下 ， 所 有 泗 员 残 
会 按照 预先 分 配 好 的 脚本 进行 表演 ， 一 个 影视 片段 就 算 录 成 了 。 

设计 WPF 的 场景 时 情况 也 友人 不 多 ， 先 是 把 一 组 独立 的 动画 组 织 在 一 
个 Storyboard 元 系 中 、 安 排 好 它们 的 协作 关系 ， 然 后 指定 哪个 动画 由 哪 
个 UI 元 素 、 哪 个 属性 负责 完成 。Storyboard 设 计 好 后 ， 你 可 以 为 它 选 择 
一 个 恰当 的 触 友 时 机 ， 比 如 按钮 按 下 时 或 下 载 开 始 时 。 一 旦 触 友 条 件 补 
满足 ， 动 男 场 景 就 会 开始 执行 ， 用 户 束 会 看 到 动画 效果 。 

下 面 是 一 个 Storyboard 的 例子 。 程 序 的 XAML 代 码 如 下 : 


«Grid Margin="6"> 
<|-- 布 局 控制 -> 
<Grid.RowDefinitions> 
<RowDefinition Height="38" /> 
<RowDefinition Height="38" /> 
<RowDefinition Height="38" /> 
«JGrid.RowDefinitions? 
«Grid.ColumnDefinitions? 
«ColumnDefinition /> 
«ColumnDefinition Width-"60" /= 
«jGrid.ColumnDefinitions? 
«Rus (ZL) -> 
«Border BorderBrush-" Gray" BorderThickness-" |" Grid.Row-"0" 
«Ellipse x:Name-"ballR" Height-"36" Width-"36" Fill-" Red" 
HorizontalAlignment-" Left"? 
«Ellipse.RenderTransform 
«TranslateTransform x:Name-"ttR" /> 
«JEllipse.RenderTransform? 
«JEllipse» 


[Border 


<|-- 跑 道 ( 绿 ) — 
«Border BorderBrush-"Gray" BorderThickness="1,0,1,1" Grid.Row="1"> 
«Ellipse x:Name="ballG" Height="36" Width="36" Fill-"LawnGreen" 
HorizontalAlignment="Left"> 
<Ellipse.RenderTransform> 
<TranslateTransform x:Name-"ttG" /> 
</Ellipse.RenderTransform> 
</Ellipse> 
</Border> 
RB GR) -> 
«Border BorderBrush="Gray" BorderThickness-" 1,0,1,1" Grid. Row-"2"» 
«Ellipse x: Name-"ballB" Height" 36" Width-"36" Fill-"Blue" 
HorizontalAlignment-"Left" 
«Ellipse.RenderTransform? 
«TranslateTransform x:Name-"ttB" /> 
«/Ellipse. RenderTransform 
</Ellipse> 
</Border> 
<l i-> 
«Button Content-"Go!" Grid.Column="1" Grid.RowSpan-"3" Click-"Button Click" /> 
«Grid» 


程序 的 UI 如 图 12-30 所 示 。 单 击 投 钮 后 ， 三 个 小 球 分 别 在 不 同 的 时 
间 开 始 回 右 以 不 同 的 速度 移动 。 








图 12-30 ”程序 的 UI 





Button] Click3E- fF Ab 3g 28 4 83 Wn F: 
private void Button. Click(object sender, RoutedEventArgs e) 
| 


Duration duration = new Duration(TimeSpan.FromMilliseconds(600)); 


I| 红色 小 球 匀 速 移动 

DoubleAnimation daRx = new DoubleAnimation(); 
daRx.Duration = duration; 

daRx.To = 400; 


路 绿色 小 球 变速 运动 

DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames(); 
dakGx. Duration = duration; 

splineDoubleKeyFrame kfG = new SplineDoubleKeyFrame(400, KeyTime.FromPercent( 1.0)); 
kfG.KeySpline = new KeySpline(l, 0, 0, 1); 

dakGx.KeyFrames.Add(kfG); 


I| 蓝 色 小 球 变速 运动 

DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames(]; 
dakBx.Duration = duration; 

SplineDoubleKeyFrame kfB = new SplineDoubleKeyFrame(400, KeyTime.FromPercent( 1.0); 
kIB.KeySpline = new KeySpline(0, 1, 1, 0); 

dakBx.KeyFrames. Add(kfB); 


I 创建 场景 
Storyboard storyboard = new Storyboard(): 


Storyboard.SetTargetName(daRx, "ttR"); 
Storyboard.SetTargetProperty(daRx, new PropertyPath( Translate [ranstorm. AProperty)); 


Storyboard.SetTargetName(dakGx, "ttG"); 
Storyboard.Set TargetProperty(dakGx, new PropertyPath( Translate Transform. XProperty); 


Storyboard.SetTargetName(dakBx, "ttB"); 
Storyboard.SetTargetProperty(dakBx, new PropertyPath( TranslateTransform. XProperty) ; 


storyboard. Duration = duration: 
storyboard. Children. Add(daRx); 
storyboard. Children. Add(dakGx ); 
storyboard.Children.Add(dakBx); 


storyboard. Begin(this); 
storyboard.Completed += (a, b) => | MessageBox.Show(ttR. X. ToString()); 1: 
| 


HEBR, EH CHIKI SKH Storyboard JE ERR, Ex f ERMAR 
或 遇 到 非得 使 用 C# 动 态 创建 Storyboard 的 情况 ， 不 然 我 们 都 是 用 XAML 
代码 创建 Storyboard。Storyboard 一 般 都 放 在 UI 元 素 的 Trigger 里 ，Trigger 
在 触发 时 会 执行 <BeginStoryboard> 标 签 中 的 Storyboard 实 例 : 


«Button Content-" Go!" Grid.Column-" I" Grid.RowSpan="3"> 
«Button. Triggers» 
«EventTrigger RoutedEventz" Button (Click > 
<BeginStoryboard> 
«Storvboard Durationz"(:0:0.6"» 
<1.- 红 色 小 球 动画 -> 
«DoubleAnimation Duration-"0:0:0.6" To="400" 
Storyboard. TargetName="ttR" 
Storyboard. TargetProperty="X" /> 
<!-- 绿 色 小 球 动画 -> 
«DoubleAnimationUsingKeyFrames Duration-"0:0:0.6" 
Storyboard. TargetNamez"ttG" 
Storyboard. TargetPropertyz" X"» 
«SplineDoubleKeyFrame KeyTime="0:0:0.6" Valuez "400" 
Keyspline= 1,0,0,1 /> 
</DoubleAnimationUsingKeyFrames> 
<-- 红 蓝 小 球 动画 -> 
«DoubleAnimationUsingKeyFrames Duration= (0:0:0.6 " 
Storyboard. TargetName="ttB" 
Storyboard. TargetPropertyz"X"5 
«SplineDoubleKeyFrame Key Timez"0:0:0.6" Valuez "400" 
KeySpline=" 0,1,1,0" /> 
</DoubleAnimationUsingKeyFrames> 
</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
</Button, Triggers> 


</Button> 


除了 为 Button 沭 加 了 Trigger 并 去 挥 对 Click 事 件 的 订阅 之 外 ，XAML 
代码 其 他 的 部 分 不 做 任何 改动 。 可 以 看 到 ， 使 用 XAML 代 人 码 编写 
Storyboardz/] ii| E HH CHRIS fi] y fF Blend Æ E HJ Storyboard f V8 5 
之 非常 类 似 。 


